<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul>
<li><figure><img src="http://template.themeton.com/creatify/images/accordion_1.png">
<figcaption>
REALLY GREAT VALUE FOR WHAT YOU GET. I RECOMMEND CREATIFY TO EVERYONE!
</figcaption>
</figure></li>
<li><figure><img src="http://template.themeton.com/creatify/images/accordion_2.png">
<figcaption>
REALLY GREAT VALUE FOR WHAT YOU GET. I RECOMMEND CREATIFY TO EVERYONE!
</figcaption>
</figure></li>
<li><figure><img src="http://template.themeton.com/creatify/images/accordion_3.png">
<figcaption>
REALLY GREAT VALUE FOR WHAT YOU GET. I RECOMMEND CREATIFY TO EVERYONE!
</figcaption>
</figure></li>
<li><figure><img src="http://template.themeton.com/creatify/images/accordion_4.png">
<figcaption>
REALLY GREAT VALUE FOR WHAT YOU GET. I RECOMMEND CREATIFY TO EVERYONE!
</figcaption>
</figure></li>
</ul>
ul li {
list-style-type:none;
float:left;
width:25%;
}
ul:hover li {
width:10%;
}
ul:hover li figure {
position:relative;
}
ul:hover li figure figcaption {
position:absolute;
top:30%;
right:0;
display:none;
}
ul li:hover {
width:70%;
}
ul li:hover figure figcaption {
display:block;
}
ul,
ul:hover,
ul li,
ul li:hover {
transition:all ease-out 0.3s;
}
