JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
<li class="urban"><a href="#">Urban</a></li>
</ul>
</div>

CSS

.jimgMenu {
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
}
.jimgMenu ul li {
float: left;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height: 200px;
}
.jimgMenu ul li.landscapes a {
background: url("http://www.rachelgallen.com/images/daisies.jpg") repeat scroll 0%;
}
.jimgMenu ul li.landscapes a:focus {
background: url("http://www.rachelgallen.com/images/daisies.jpg") repeat scroll 0%;
width:500px;
}
.jimgMenu ul li.people a {
background: url("http://www.musicmatters.ie/images/bara2.jpg") repeat scroll 0%;
}
.jimgMenu ul li.people a:focus {
background: url("http://www.musicmatters.ie/images/bara2.jpg") repeat scroll 0%;
    width:500px;
}
.jimgMenu ul li.nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(images/urban.jpg) repeat scroll 0%;
min-width:310px;
}