JSFiddle - React, Tailwind, and code Playground

by wouterpasman

HTML

<nav>
				<ul>
					<li><a class="foo" href="#">
        <img src="http://www.wouterpasman.com/jsfiddle/navtest/img1.png" />
        <img src="http://www.wouterpasman.com/jsfiddle/navtest/img1_hover.png" />
    </a></li>
					<li><a class="foo" href="#">
        <img src="http://www.wouterpasman.com/jsfiddle/navtest/img2.png" />
        <img src="http://www.wouterpasman.com/jsfiddle/navtest/img2_hover.png" />
    </a></li>
					<li><a class="foo" href="#">
        <img src="http://www.wouterpasman.com/jsfiddle/navtest/img3.png" />
        <img src="http://www.wouterpasman.com/jsfiddle/navtest/img3_hover.png" />
    </a></li>
				</ul>
         
</nav>

CSS

.foo { max-width: 100%; }

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}

nav ul {
	list-style: none;
  text-align: center;
}

img {
  max-width: 100%;  
}
}