It’s been a while since our last post due to updates on our system, but we are back now with a new unique and easy responsive pure CSS image hovers grid and easy to implement. We are using hover.css for our hover effects in combination with font-awesome and very simple HTML5 structure. You can see the tutorial bellow and check out our demo.

HTML5 structure:

<section id="gallery"> <div class="intro">Lorem ipsum dolor sit amet, in unum ludus animal mel, recusabo accommodare ne nec. Mei vituperata definitionem in, at eos vero deserunt, causae nostrum pro an. Ex quis suscipit vis, ad mel wisi partiendo. Eos te modus conclusionemque, liber labitur eu per. Ceteros indoctum usu ne, vim idque virtute scribentur an.</div><!-- Intro --> <ul> <li><a class="grow" href="#"><img src="images/gallery/1.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="shrink" href="#"><img src="images/gallery/2.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="pulse" href="#"><img src="images/gallery/3.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="rotate" href="#"><img src="images/gallery/4.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="hover" href="#"><img src="images/gallery/5.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="wobble-horizontal" href="#"><img src="images/gallery/6.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="buzz-out" href="#"><img src="images/gallery/7.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="push" href="#"><img src="images/gallery/8.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> <li><a class="pop" href="#"><img src="images/gallery/9.jpg" width="310" height="200" /><div class="hover-content"><i class="fa fa-search"></i></div></a></li> </ul> </section><!-- Container -->

And this is the CSS style:

a { -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; } /* Style 1 */ #gallery { max-width:960px; padding:10px; margin:30px auto; text-align:center; } #gallery .intro { text-align:center; font-size:12px; margin:0px 0px 20px 0px; line-height:16px; } #gallery ul li { display:inline-block; width:310px; max-width:33%; min-height:100%; height:200px; position:relative; overflow:hidden; z-index:1; } #gallery ul li a .hover-content { background:#FFF; position:absolute; width:100%; height:100%; z-index:2; top:0; left:0; opacity:0; transition: 0.50s; } #gallery ul li a { color:#000; } #gallery ul li a .hover-content:hover { opacity:0.9; } #gallery ul li a .hover-content i { font-size:30px; position:absolute; top:43%; left:47%; }

Demo

Download