CSS3 Hover Effects

November 14, 2011

Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.

In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects.
Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

HTML Markup

This simple structure allows us to make these effects. As you can see in the code below we create a parent class view, and the contents inside. Then we create a class mask where we apply CSS3 transitions to get the hover effect. In later examples, this syntax could change slightly depending on the effect you want to apply.

<div class="view">  
  <img src="images/1.jpg" />  
  <div class="mask"></div>
  <div class="content">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>   

CSS

Here you will set the basic properties of our tutorial. For every effect there will be a different CSS file, you can incorporate the various effect into one CSS file.

.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

.view .mask, .view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}

1 Example

HTML

Add the special class effect to the element with the class view for this effect.

<div class="view effect">  
  <img src="images/1.jpg" />  
  <div class="mask"></div>  
  <div class="content">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>   

CSS

As we see it is very easy to create animations of really interesting, for reasons of space I have omitted the prefixes (-moz-,-webkit- etc.) but you will find all prefixes in the file.

In addition to using the border property to create a triangle, I used the multiple transitions that allows me to have more control on each property during the animation.

.effect img {
   opacity:1;
   transform:scale(1,1);
   transition: all 0.2s ease-in;
}

.effect .mask {
   opacity:0;
   overflow:visible;
   border-color:rgba(0,0,0,0.7) transparent transparent transparent;
   border-style:solid;
   border-width:150px;
   width:0;
   height:0;
   transform:translateY(-125px);
   transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}

.effect a.info {
   opacity:0;
   transform:translateY(-125px);
   transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}

.effect:hover img {
   opacity:0.7;
   transform:scale(2,2);
}

.effect:hover .mask {
   opacity: 1;
   transform: translateY(0px);
}

.effect:hover a.info {
   opacity:1;
   transform:translateY(100px);
}

Go to View the Example

2 Example

HTML

The syntax in this example is slightly different, always enough add special class second-effect to the class view, but we’re going to include the link inside the class mask.

<div class="view second-effect">  
  <img src="images/2.jpg" />  
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>  

CSS

In this example we are going to operate on the parameters of the border property. I also implemented the box-sizing. The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.

.second-effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}

.second-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}

Go to View the Example

3 Example

HTML

Add to the class view the special class third-effect for this effect.

<div class="view third-effect">  
  <img src="images/3.jpg" />  
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>  

CSS

As we see with very few lines of code we can get a nice effect thanks to the border property.

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.third-effect a.info {
   position:relative;
   top:-10px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}

.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

Go to View the Example

4 Example

HTML

The markup in this example is reduced compared to the previous examples, but the hover effect will be very impressive.

<div class="view fourth-effect">  
  <a href="#" title="Full Image"><img src="images/4.jpg" /></a>  
  <div class="mask"></div>  
</div>  

CSS

Using only the class mask in combination with the border-radius property will really take a beautiful hover effect.
I also used the visibility which allows the transition end to have the image clickable.

.fourth-effect .mask {
   position:absolute; /* Center the mask */
   top:50px;
   left:100px;
   cursor:pointer;
   border-radius: 50px;
   border-width: 50px;
   display: inline-block;
   height: 100px;
   width: 100px;
   border: 50px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:1;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}

.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

Go to View the Example

5 Example

HTML

This last example has the same syntax matches the 4 example, the only difference being that one must add the class fifth-effect instead of fourth-effect.

<div class="view fifth-effect">  
  <a href="#" title="Full Image"><img src="images/5.jpg" /></a>  
  <div class="mask"></div>  
</div> 

CSS

Also here we will use the border property with the visibility property. As you can see the trick is to change the border property to be solid to double.

.fifth-effect img {
   opacity:0.2;
   transition: all 0.3s ease-in;
}

.fifth-effect .mask {
   cursor:pointer;
   opacity:1;
   visibility:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}

.fifth-effect:hover .mask {
   border:0px double rgba(0,0,0,0.7);
   opacity:0;
   visibility:hidden;
}

.fifth-effect:hover img {
   opacity:1;
}

Go to View the Example

Conclusion

I hope that you liked these experiments, but above all I hope that they can inspire you for your projects.

Thanks for your time.

43 Comments

  1. Davvero belli e interessanti. Ma quale e` la tua opinione in merito all’uso effettivo da farne oggi. Nel senso: dove non sono supportati, cosa succede ed eventualmente cosa conviene fare?

    • Grazie, semplice nei browser che non supportano le proprietà CSS3, si può tranquillamente utilizzare Modernizr e inserire uno script apposito solo nell’eventualità che il browser non supporti ad esempio le CSS3 Transitions.

      Le CSS3 Transitions vengono supportate da Chrome, Safari 3.1+, Firefox 4+, Opera 10.5+ e IE10+.

      Ovviamente per gli altri hai due soluzioni, usare Modernizr e CSS3, oppure non usare le CSS3 Transitions e lavorare solo in jQuery.

      Io personalmente trovo più utile utilizzare la soluzione Modernizr + CSS3.

  2. Very good examples of hover effects.

  3. Joel Hummel

    Thank you for contributing this tutorial! I downloaded the example and want to learn it better by experimenting with it myself. Credit to you!

  4. Nice Collection. I really Like It.

    Thanks for Share. Keep it up. :)

  5. VenomVendor

    Coool Effects, i like the Demo-$ very much :)

  6. falguni patel

    Nice effects but can not work in Internet explorer ……. :(

  7. Thanks for sharing this tutorial. Great effects!

  8. Ope

    awesome demo’s. thanks for sharing.

  9. Pretty impressive work! Ill be glad to use it in my next work! Thanks for share it!

  10. Great, looks really awesome. And i am very happy to see that all effects are done by css, no jquery. Thanks for sharing

  11. wooow really awesome
    this tut inspiring so much
    TY VM

  12. dinesh

    Very Nice thank you for share

  13. Awsome effect,nice job!

  14. Ivano

    Bravissimo! Grazie

  15. 痞子

    Wow , Your work is great

  16. Great effects, will use the 2nd example on my new project :)

  17. Ciao,

    This is a nice collection, really interesting!

    It seems like there is a bit of competition between CSS and JavaScript though. CSS can now reproduce tricks that JavaScript was considered as top.

    PA

  18. Rex

    Great trick to use CSS for hover effects, one more I found over here

    http://webstutorial.com/css3-image-hover-effects/css3

  19. Good Lesson, I can use this for a project I’m working on.

    Thank you!

  20. Cristi.Nebunu

    awesome hover effects. you are an artist.
    however, i can’t seem to be able to make it work as it is supposed to. i can’t make the link.png align properly in the middle on the vertical axis , here is my problem :
    https://dl.dropbox.com/u/10446694/New%20folder/index.html

    can anyone help ?

  21. Xuya

    Very Good !!!

  22. Muchas gracias exelente tutorial!
    Exellent tutorial Thanks!!!

  23. awesome thanks for these simple yet elegant examples.

  24. ahmed tawfik

    Nice effects but can not work in Internet explorer ……. :(

  25. Awesome work, thanks so much for sharing!

  26. Gani

    OMG!!!!!! this is exactly what i need

  27. Thank you very much
    this is what I need from the first.

  28. i am having problem with this css in ie8
    can you suggest any patcht for it

  29. Beautiful!! Thank you very much

  30. aldi

    you’re the best….
    it;s inspiring me
    thanks

  31. Good effects i am going to use in my project of quotes. Thank you

  32. Ajaan

    WOW! who’s that girl?

  33. david

    thanks man your blog was so fun,simple and power full.if you have any website about learning css3 pleas send it to my.

    god luck.

  34. Tom

    Great tutorial, thanks.

    It seems IE is still struggling with new css effects. I wish that browser was banned :)

  35. Aib

    Grazie mille Alessio , hai spiegato tutto in un modo facile per capire!
    Ho cercato tutto il web per capire come funziona. :)

  36. Great hover effects. i use on my page

  37. Great hover effects. It’s little tweaks like this that turn a potentially dull website in to something modern and ‘cool’. Thanks.

Leave a Reply