"image hover effect "
Bootstrap 3.3.0 Snippet by bsrnlr

<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; }

Related: See More


Questions / Comments: