Super Cool Image Hover Effect Using Pure CSS3

Published on November 26, 2013

Hi, guys. Over the past few days, I have been working on CSS3 animations. I came across many cool CSS3 techniques(will share it soon…) But for now, I’m really excited to share a special one. In this when we hover on product image a cool animation will occur. In this, we don’t use any jquery or any other javascript library to do this. We will use only CSS3 transitions and box shadow to do this. Don’t waste any more time. Let’s just start.

Demo download

Just create an empty project and start adding the file as we do coding here.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Super cool image hover effect</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="main">
      <div class="item pic1"></div>
      <div class="item pic2"></div>
      <div class="item pic3"></div>
      <div class="item pic4"></div>
      <div class="item pic5"></div>
      <div class="item pic6"></div>
    </div>
  </body>
</html>

It’s very simple markup. Here we have 6 div items we will put background images in CSS.

style.css

.main {
  width: 850px;
  margin: 0 auto;
}
.pic1 {
  background: url("img/1.jpg") no-repeat;
}
.pic2 {
  background: url("img/2.jpg") no-repeat;
}
.pic3 {
  background: url("img/3.jpg") no-repeat;
}
.pic4 {
  background: url("img/4.jpg") no-repeat;
}
.pic5 {
  background: url("img/5.jpg") no-repeat;
}
.pic6 {
  background: url("img/6.jpg") no-repeat;
}
.item {
  float: left;
  width: 240px;
  height: 240px;
  margin-left: 40px;
  margin-bottom: 20px;
  background-size: cover;
  background: #1c252c;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 1px 230px rgba(0, 0, 0, 0.6), inset 0 0 0 0px #1c252c;
  transition: all 0.5s ease-in;
  transition: box-shadow 400ms ease-in-out;
  /* Safari/Chrome, other WebKit */

  -webkit-border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1px 230px rgba(0, 0, 0, 0.6), inset 0 0 0 0px
      #1c252c;
  -webkit-transition: box-shadow 400ms ease-in-out;
  /* Firefox, other Gecko */

  -moz-border-radius: 50%;
  -moz-box-shadow: inset 0 0 1px 230px rgba(0, 0, 0, 0.6), inset 0 0 0 0px
      #1c252c;
  -moz-transition: box-shadow 400ms ease-in-out;
  /* Opera/IE 8+ */

  -o-transition: box-shadow 400ms ease-in-out;
  -ms-transition: box-shadow 400ms ease-in-out;
}
.item:hover {
  opacity: 1;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.6), inset 0 0 0 0px #1c252c,
    0 0 10px rgba(0, 0, 0, 0.3);
}

In all pic* classes we put product background images(you can download sample images with source). The important CSS class is an item. First observe the box-shadow property in item class, In that we use inset to get inner box shadow and we make that box shadow transparent black using rgba. We applying CSS3 transition to box-shadow with ease-in-out function. (Later change this with different other easing functions to check how it works). On item hover pseudo class we change the opacity value to 1 and box-shadow values. So ultimately we got this amazing effect.

Image credits

Note: All images used in this demo are from //www.flickr.com/photos/astragony/ under creative common license.

Conclusion

This code won’t work in IE below 9 version browsers. So if you want to use it in your products use it carefully. Thank You.