JSFiddle - React, Tailwind, and code Playground

Image Hover Transitions

by Jennifer Perrin

HTML

<div class="box">
    <div class="head">
    <span class="caption">
      <h4>Running</h4>
      <h5>gender</h5>
       <ul>
        <li><a href="#">Men</a></li>
        <li><a href="#">Women</a></li>
        <li><a href="#">Kids</a></li>
       </ul>
      <h5>category</h5>
       <ul>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gear</a></li>
       </ul>
    </span>
    </div>
    <img src="http://jenniferperrin.com/images/reside.png" />
</div>

<div class="box">
    <div class="head">
    <span class="caption">
      <h4>Running</h4>
      <h5>gender</h5>
       <ul>
        <li><a href="#">Men</a></li>
        <li><a href="#">Women</a></li>
        <li><a href="#">Kids</a></li>
       </ul>
      <h5>category</h5>
       <ul>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gear</a></li>
       </ul>
    </span>
    </div>
    <img src="http://jenniferperrin.com/images/clientresponse.png" />
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Ralway:300,600');

 body {
    font-family:'Ralway', sans-serif;
    background: #dcdcdc;
    font-weight:300;
}

.box, .box:before, .head, .caption { display: block; }
    .box:before, .head, .caption { position: absolute; }

.box {
    position:relative;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:400px;
    height:300px;
    margin:2em auto;
    padding-left:0px;
    overflow:hidden;
    background: #498EA5;
    
    -webkit-box-shadow: -2px 2px 0 rgba(255, 255, 255, 0.8), -4px 4px 0 rgba(122, 122, 122, 0.6);
       -moz-box-shadow: -2px 2px 0 rgba(255, 255, 255, 0.8), -4px 4px 0 rgba(122, 122, 122, 0.6);
            box-shadow: -2px 2px 0 rgba(255, 255, 255, 0.8), -4px 4px 0 rgba(122, 122, 122, 0.6);
    
    -webkit-transition: all 0.7s;
       -moz-transition: all 0.7s;
        -ms-transition: all 0.7s;
         -o-transition: all 0.7s;
            transition: all 0.7s;
}

.box:hover {
    padding-left:100px;
}
.box:hover:before {
    right:-300px;
}
.head {
    height:100%;
    width:650px;
    top:0px;
    left:-155px;
    margin:0px;
    padding-left:20px;
    background:transparent;
    
    -webkit-transition: all 0.45s;
       -moz-transition: all 0.45s;
        -ms-transition: all 0.45s;
         -o-transition: all 0.45s;
            transition: all 0.45s;
}
.head:hover {
    left:0px;
}

.caption {
    background: #498EA5;
    height: 100%;
    padding: 15px 20px 0px 0px;
}
h4 {
    font-size:1.25em;
    font-weight:300;
    line-height:1.5em;
    padding:0px;
    margin:0px;
    text-transform: uppercase;
}
h5 {
    padding:0px;
    margin:0px;
    font-size:1.2em;
    font-weight:300;
}
.caption ul {
    list-style-type:none;
    list-style-position:inside;
    margin:0px;
    padding:0px;
}
.caption ul li {
    margin:0px;
    padding-left:13px;
    font-size: .9em;
    line-height: 1.2em;
}
.caption ul li a {
    margin-top:0px;
   ...