Image Hover Effects with Pure CSS 3.0

Image hover effects are the latest trend in web design and you must have seen their use in several websites. With hover effect, images changes shapes, colors, position, etc. on mouse hover which makes them look dynamic and special. Although the image hover effects can be achieved using JavaScript or Jquery; it can also very easily be created with CSS3 transition property.

Here, I have created some super cool hover effects which are really easy to understand and implement on your website. I have used pure CSS3 here for hover effects to work and make your images stand-out and zoom-in!

You must however note that these effects will not work on older browsers. And please don’t expect IE8 and its earlier versions to support these. However, all the latest web browsers will happily show you these effects. We will pass on the vendor prefixes where required on CSS3 properties for accommodating most of the browsers. But otherwise also, you don’t have to worry about the browser support. These hover effects degrade nicely and in most of the cases should not adversely affect your site experience.

Have a look, what all we are creating here.

The complete codes and html file is available for download at the end of this article. At the same time, in each example, I will explain about the codes which have been used to achieve the hover effect. Also for the sake of simplicity, I will not write the vendor prefixes in examples. This should be pretty easy for you to understand if you have the basic idea of CSS.

Common CSS Code

In all the examples here, I have used one parent division block and put the image inside this. The common CSS code for these divisions is:

.holder
{
    border: 10px solid #FFFFFF;
    width: 200px;
    height: 150px;
    float: left;
    margin: 20px;
    box-shadow: 2px 2px 5px #333333;
    overflow: hidden;
    transition: all 0.5s Ease;
}

As you can see, there is nothing special here. I have used two CSS3 properties here – box-shadow and transition. You may like to go through my complete tutorial on CSS3 box-shadow property. For each image hover effect, I have set the transition time to 0.5 second with CSS3 transition property.

Come Out

Our first image hover effect is come-out. As you move your mouse over the image, it will appear to come-out. This is achieved by using CSS3 transform property where we are scaling the block to 1.03 times (or 3%). Along with that we are also spreading the box-shadow. The two properties together bring the realistic effect of image coming out. Super easy and super cool!

come-out

CSS

.come-out:hover
{
    box-shadow: 5px 5px 10px 5px #666666;
    transform: scale(1.03, 1.03);   
}

HTML

<div>
        <img src="Images/css-effects/1.jpg" />
</div>

We are passing two classes with div here: ‘holder’ (parent class) and ‘come-out’. Easy and straightforward, isn’t it?

Stand Up

This hover effect is very similar to the ‘come out’ effect. Here the image is actually standing up out of the crowd on mouse hover. Here we are using the same CSS3 transform property, this time to translate the block by 10px in vertical direction. We are also tweaking the box-shadow property a little to get a more realistic effect.

Image Hover Effect -Stand-up

CSS

.stand-up:hover
{
    box-shadow: 2px 2px 5px #666666;
    transform: translate(0px, -10px);   
}

HTML

<div>
        <img src="Images/css-effects/1.jpg" />
</div>

The HTML code is pretty the same as earlier example. The only change is that we are using ‘stand-up’ class along with ‘holder’ class.

Collage

For achieving this effect we will use CSS3 transform property to rotate a group of images by different angles. If you move your mouse on any of these images, it will become straight and come in front. Although, you can apply this hover effect on single image also, it looks more attractive in a group.

Image Hover Effect - Collage

For each of the image, we define a random angle. Here, I have used four images for making this collage.

CSS

.rotate1
{
    transform: rotate(-5deg);   
}
.rotate2
{
    transform: rotate(15deg);
}
.rotate3
{
    transform: rotate(-15deg);   
}
.rotate4
{
    transform: rotate(10deg);   
}

And finally, for hover effect, the rotate angle is set to zero for each of these images. Also, we are defining Z-index to 10 on hover, so that the image comes in front of others.

.rotate
{
    margin: 0px;
    position: relative;
}
.rotate:hover
{
    transform: rotate(0deg);   
    z-index: 10;
}

HTML

    <div>
        <img src="Images/css-effects/1.jpg" />
    </div>
    <div>
        <img src="Images/css-effects/2.jpg" />
    </div>
    <div>
        <img src="Images/css-effects/3.jpg" />
    </div>
    <div>
        <img src="Images/css-effects/4.jpg" />
    </div>

Circulate

This effect is also achieved by the same CSS3 transform property, but this time, we are defining the rotation angle to 360deg. The effect is pretty wild as it makes a full rotation on mouse hover. Rotation by 360 deg brings the image back to its starting position.

Image Hover Effect - circulate

CSS

.circulate:hover
{
    transform: rotate(360deg);
}

HTML

<div>
   <img src="Images/css-effects/1.jpg" />
</div>

You need to view this effect in action in the preview page.

Focus

You can use this hover effect to bring focus to the image. Here, we are using border-radius property of CSS3 to round the corners of the block. At hover, the border-radius is set to 50% making it fully round. Also, we are changing the border color and width to create a more effective focus.

Image-hover-effect-focus

CSS

.radius:hover
{
    border: 20px solid #666666;
    border-radius: 50%;
}

HTML

<div>
        <img src="Images/css-effects/1.jpg" />
</div>

Fade In

The last hover effect is Fade In. In this case, we are using the opacity property of CSS3. Opacity sets the transparency. Unlike earlier examples, where we were targeting the block, in this example, we will target the image directly to make sure that the border remains visible.

Initially, the opacity of image is set to 0.5, making it 50% transparent. Once you move over your mouse to image, it changes back to 1 making it fully opaque. This gives the fade-in hover effect.

image-hover-effect-fade-in

CSS

.fade-in
{
    opacity: 0.5;
    transition: 0.5s Ease;   
}
.fade-in:hover
{
    opacity: 1;
}

HTML

<div>
        <img src="Images/css-effects/1.jpg" />
</div>

Conclusion

These are simple examples of image hover effect which can easily be implemented with pure CSS3.

Download the complete html, CSS and image files

So, what are you waiting for? Feel free to copy the codes and use it in your website.

For the sake of simplicity, I have used only one CSS3 property in all these examples. However, you can get more awesome effects with combination of two or more CSS3 properties. Do experiment and let us know in the comments below if you create or come across some more awesome image hover effects with CSS3.

Tagged on: ,

3 thoughts on “Image Hover Effects with Pure CSS 3.0

  1. stefano rizzo

    Hi
    I would like to achieve the come out effect in one of the pages but it is not clear to me where to add the .holder div, the .come-out div and the html. I know a tiny bit of CSS after building 3 websites but could you help me understanding how to insert the divs and where?
    Thank you for your time

    1. Gunjesh Kumar Post author

      Hi stefano,
      Please save the demo file as complete webpage. You will get both html and css files. Open both the files to see the placement of divs. Experiment a bit and you would be able to make it. By the way divs can be placed anywhere inside the body tag.

Leave a Reply