Create CSS quick and simple image hover effects


Add subtle interest and engagement to your image links


In addition to the recent trends in web design towards typographics, there has also been a shift in the use of images.

As broadband speeds increase and web delivery methods refine, it’s no longer detrimental to the load-time of a website if it‘s heavy with large images. This enables imagery to be used as part of more interactive elements, such as navigation links. CSS now provides a wealth of possibilities to animate, embellish and enhance online imagery, and turn your images into interactive elements. We will look at the process behind creating an image grid, complete with CSS hover effects and animated captions.



Build the base HTML

Start by building the first cell in our grid. The cell div contains an image with caption div underneath. These are wrapped in an ‘a’ link, repeat it for the images you use, then adjust the pic and caption for each cell.

Set cell sizes

Make sure that our images will adjust themselves to fit the cell divs when set to a 25% width. Equally sized images are essential for this grid. Note that the cell divs can have a finite width. The relative position will come into play when the caption is styled in the next step.

001 img {
002 max-width:100%;
003 border:none; /*for IE*/
004 }
005 .cell {
006 position: relative;
007 overflow: hidden;
008 width:25%;
009 height:auto;
010 float:left;
011 }  

Use the caption CSS

We are using the caption div as an overlay to the image, by giving it an absolute position and 100% width and height. The caption will be styled in the next step. Choose your own background colour but rgba with opacity will give you transition on hover. Remember your vendor prefixes for the transition declaration.

001 .caption {
002     position: absolute;
003     top: 0;
004     left: 0;
005     width: 100%;
006     height: 100%;
007     background:rgba(31,31,31,0.8);
008     transition: all 0.6s ease;
009     }

Set the H2 CSS tag

The actual caption H2 tag also has an absolute position to place and move it. Font size, colour and family can be at your discretion. Set an initial opacity of 0.1, to hint at the caption before hovering. We’ll use the transform property to animate the caption as it fades in. Begin with a -30px height from the 0 bottom property.

001 .caption h2 {
002     position: absolute;
003     bottom: 0;
004     left: 0;
005     margin:0;
006     padding: 15px;
007     opacity:0.1;
008     transition: all 0.6s ease;
009     transform: translate3d(0,-30px,0);
010     }

Change the hover effects

Now to tie up the hover effects. First lift the opacity on the caption background, revealing the image and increase the opacity of the H2 tag to full. Animate the H2 tag by reducing that -30 pixel distance back to 0, using the transition to ease the animation.

001 .caption:hover {
002     background:rgba(31,31,31,0);
003     transition: all 0.6s ease;
004 }
005 .caption:hover h2 {
006     opacity:1;
007     text-shadow: 1px 1px #1f1f1f;
008     transition: all 0.6s ease;
009     transform: translate3d(0,0,0);
010     }          



To desaturate images and saturate on hover, we use the grayscale filter property. This is fully supported in Chrome and IE6 to 9, with some support in Safari.

Focus on cell

The key to implementing the filter is to make the cell div the focus of the hover action. Add the following to the .cell CSS, and change every instance of .caption:hover to .cell:hover through original animations.

001 .cell {
002 ...
003 -webkit-filter: grayscale(1); /* Older webkitversions */
004 -webkit-filter: grayscale(100%); 
005 filter: grayscale(100%);
006 filter: gray; /* IE6-9 */
007 transition: all 0.6s ease;
008 }

Add a  new hover effect

Now add filter property transition and simply eliminate the grayscale filter with an easing transition. You can adjust the opacity levels of the original caption div now that images load in black and white.

001 .cell:hover {
002 -webkit-filter: grayscale(0); /* Older webkit     versions */
003 -webkit-filter:         grayscale(0%); 
004 filter: grayscale(0%); 
005 filter: none; /* IE6-9 */ 
006 transition: all 0.6s ease;    
007 }

Colour or monochrome

Using the grayscale filter to ease between monochrome and colour produces a very eye-catching effect. It may not be fully supported, but there are JavaScript fallbacks and SVG alternatives as browsers catch up.