6 kinds of coolImage Overlay Hover Effects With CSS3 Transitions

we’re going to build some image overlay hover effects with CSS3 transitions. When we hover over an image, a neat transition will occur, showing us an icon that hints the user to click on it for more.
Image overlay hover effects with CSS3 transitions are a great way to add some nice interactivity on your site. In the old days, a little pointer cursor would do the trick for indicating to the user that an image was clickable to view more information. Nowadays, we want some smooth transitions and some UI icons to prompt the user. In our case, we’re going to have a series of images. When the user hovers over an image, a semi-transparent black background transitions in over the image, along with a “+” icon. This will indicate to the user that they can click the image for things like more info, a larger view of the image, etc. Let’s get started!
Diving In
For the tutorial post, I’m only going to explain and go through one overlay hover effect. If you get the source though, you’ll have full access to all the CSS/markup that covers all 6 transitions in the demo. Without further ado, let’s look at the HTML markup for one of the transitions.
<div id="effect-1" class="effects clearfix"> <div class="img"> <img src="img/jpg/1.jpg" alt=""> <div class="overlay"> <a href="#" class="expand">+</a> <a class="close-overlay hidden">x</a> </div> </div> <div class="img"> <img src="img/jpg/2.jpg" alt=""> <div class="overlay"> <a href="#" class="expand">+</a> <a class="close-overlay hidden">x</a> </div> </div> <div class="img"> <img src="img/jpg/3.jpg" alt=""> <div class="overlay"> <a href="#" class="expand">+</a> <a class="close-overlay hidden">x</a> </div> </div> <div class="img"> <img src="img/jpg/4.jpg" alt=""> <div class="overlay"> <a href="#" class="expand">+</a> <a class="close-overlay hidden">x</a> </div> </div> </div>
Read more:http://callmenick.com/post/image-overlay-hover-effects-with-css3-transitions
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu