CSS Tutorials

Free CSS3 Hover Effects to Copy and Paste

5/5 (1)

CSS is an amazing technology, with its help you can create truly amazing things. Using 'all that power' you can add any sorts of visual effects to your resource. So today we'll talk about CSS Image Hover Effects. We've prepared a round-up of tutorials for you to add some motion to your designs.



Image hovering can be applied to any picture on your blog or site, just add several lines of code to your CSS file. These effects will definitely amaze your visitors. All that is needed is to put the mouse over and miracle happens. It's time for me to stop talking and for you to have a look at examples we've picked for you. Enjoy these tuts and feel free to use these great effects.

***

Direction-Aware Hover Effect

Demo

***

Circle Hover Effects

Demo

***

Magnifying Glass Overlay

Demo

***

CSS3 Image Hover Effects

Demo

***

Fancy CSS3 Transitions Image Gallery

Demo

***

Snazzy Hover Effects Using CSS3

Demo

***

Popout Details on Hover CSS3

Demo

***

CSS Image Hover Effects

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.hover1 img {
     opacity: 0.5;
     filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
     zoom: 1; 
     -moz-transition: all 0.5s ease-out;  
     -o-transition: all 0.5s ease-out;  
     -webkit-transition: all 0.8s ease-out;  
     -ms-transition: all 0.5s ease-out;  
     transition: all 0.5s ease-out;
}
.hover1:hover img {
     opacity: 1;
     filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
     zoom: 1;
     -moz-box-shadow: 1px 1px 4px #000;
     -webkit-box-shadow: 1px 1px 4px #000;
     box-shadow: 1px 1px 4px #000;
}

***

6 Image Captions

Demo

***

Awesome CSS3 Image Animated Hover Effects

Demo

***

10 Easy Image Hover Effects You Can Copy and Paste

Demo

***

CSS3 Image Hover Effects With Caption

Demo

***

5 CSS Hover Effects You Will Love To Use

Demo

***

Fastest CSS Image Mouseover Effect

1
2
3
4
5
6
7
8
9
10
a.cssmouseover {
display:block;
width:200px;
height:300px;
background-image:url(pathto/image.jpg);
background-position:0px 0px;
}
a.cssmouseover:hover {
background-position:0px -300px;
}

***

jQuery Zoom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Example:
$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});
 
// Using Colorbox with Zoom
$(document).ready(function(){
  $('a.photo').zoom({
    url: 'photo-big.jpg', 
    callback: function(){
      $(this).colorbox({href: this.src});
    }
  });
});

***

PROXIMITY EFFECT WITH JQUERY AND CSS3

Demo

***

Item Blur Effect With CSS3 & jQuery

Demo

***

Fast Hover Slideshow

Demo

***

IMAGE HIGHLIGHTING AND PREVIEW WITH JQUERY

1
2
3
4
5
6
7
8
9
10
11
.ih_overlay{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#000;
    z-index:10;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

***

That's it. I hope you enjoyed our round-up, if you have any other examples on your mind feel free to share them in the comments below.

  • Thillai

    Nice link,

  • cacvy3

    Awesome Sources. Thanks a lot.

  • Cristiano Melo

    Excellent collection!!!

  • GB

    Nice article but your blogsite is incredibly slow – almost 2 minutes to show your page. This has been my experience with Templatemonster for some time now. I almost gave up waiting.

    • alexbulat

      Actually it’s not slow, probably the servers were overloaded. Sorry for the inconvenience caused.

  • alexbulat

    Thanks guys @1f8a73f0f20f1d828b0b3d882c1dc21b:disqus, @cacvy3:disqus, @b77740156f543a011c5366f675a7f41f:disqus for your appreciation.