JSFiddle - React, Tailwind, and code Playground

HTML

<body>

	<header>
		<nav class="container brown highlightTextOut">
		  <a href="index.html" alt="HOME">HOME</a>
		  <a href="infographic.html" alt="INFOGRAPHIC">INFOGRAPHIC</a>
		  <a href="life-cycle.html" alt="LIFE CYCLE">LIFE CYCLE</a>
		</nav>
	</header>

	<main>

	<div class="molehill">
		<div>
			<img id="m1" src="http://uf.heatherlaude.com/img_directory/molehill-1.png" alt="mole">
		</div>
		
		<img id="m2" src="http://uf.heatherlaude.com/img_directory/molehill-2.png" alt="mole">
		<img id="m3" src="http://uf.heatherlaude.com/img_directory/molehill-3.png" alt="mole">
		<img id="m4" src="http://uf.heatherlaude.com/img_directory/molehill-4.png" alt="mole">
		<img id="m5" src="http://uf.heatherlaude.com/img_directory/molehill-5.png" alt="mole">
		<img id="m6" src="http://uf.heatherlaude.com/img_directory/molehill-6.png" alt="mole">
		<img id="m7" src="http://uf.heatherlaude.com/img_directory/molehill-7.png" alt="mole">
		<img id="m8" src="http://uf.heatherlaude.com/img_directory/molehill-8.png" alt="mole">
	</div>

	</main>

	<footer>

	</footer>

</body>

CSS

* {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display:block;
}

@import 'https://fonts.googleapis.com/css?family=Raleway';

header, footer {
    font-family: Raleway;
    margin: 0 auto;
	padding: 2%;
	text-align: center;
    background: #555;
}

header h1 {
    color: #AAA;
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 5px;
}

header span {
    color: #222;
}

footer span {
  color: #AAA;
}

nav.container {
    font-family: Raleway;
    margin: 0 auto;
	padding: 3em 3em;
	text-align: center;
}

nav.container a {
    color: #FFF;
    text-decoration: none;
    font: 20px Raleway;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
}

.brown {
    background: #795548;
}

/* Highlight text out  */
nav.highlightTextOut a {
    color: rgba(255, 255, 255, 0.3); 
}

nav.highlightTextOut a:before, nav.highlightTextIn a:before {
    position: absolute;
    color: #FFF;
    top: 0px;
    left: 0px;
    padding: 10px;
    overflow: hidden;
    content: attr(alt);
    transition: all 0.3s;
    transform: scale(0.8);
    opacity: 0;
} 

nav.highlightTextOut a:hover:before, nav.highlightTextIn a:hover:before {
    transform: scale(1);
    opacity: 1;
}

main {
	background: url("http://uf.heatherlaude.com/img_directory/meadow-1197513_1920.jpg") center center no-repeat;
	background-size: cover;
	min-height: 500px;
}

.molehill {
	width: 359px;
	height:250px;
	position: relative;
}

.molehill > img {
	transition: 1s;
}

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8 {
	position: absolute;
	width: 100%
	height: 100%;

}

#m2, #m3, #m4, #m5, #m6, #m7, #m8 {
	opacity: 0;
}


.molehill:hover > img {
	animation-name: molehill_test;
	-webkit-animation-name: molehill_test;
	animation-duration: 3.25s;
	-webkit-animation-duration: 3.25s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-iteration-count:...