Styling a Heading

Styling a Heading using transitions, rotation and hover properties

by Alan Jones

HTML

<div id="wrapper">
  <h1>BOOM!</h1>
  <h2>Game On</h2>
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=Fjalla+One|Yellowtail';
h1 {
  font-family: 'Fjalla One', sans-serif;
  font-size: 7em;
  -ms-transform: rotate(-9deg);
  -webkit-transform: rotate(-9deg);
  transform: rotate(-9deg);
  margin-top: 0;
}

h2 {
  font-family: 'Yellowtail', cursive;
  margin-left: 14%;
  font-size: 5.2em;
  color: rgba(213, 213, 213, 0);
  margin-top: -118px;
  position: relative;
  z-index: 1;
  transition: linear 0.5s;
}

#wrapper {
  width: 100%;
  background-color: #00802b;
  padding: 10%;
}
#wrapper:hover { cursor:default;}
#wrapper:hover > h2 {color: rgba(213, 213, 213, 1);
  
}