Select Page

With a just a bit of CSS, you can add visual interest to your thumbnail links or even just use it as a more hidden way to add a caption to an image. There are endless effects you could use with CSS, so don’t be afraid to have a play around with the code and see what you can come up with!

See the Pen CSS Image Hover Overlay by Emma Wilson (@chilliconcode) on CodePen.

Lets start with the HTML

<figure>
  <img src="image.jpg" />
  <figcaption>
    <h2>This is a Title</h2>
    <a href="#">VIEW MORE</a>
  </figcaption>
</figure>

Pretty simple stuff. We’re using the HTML5 figure tag here as its a nice way to quickly add captions to images, but this could easily be done with just divs.

Onto the CSS! Lets start off with the containing element

figure {
  width: 300px;
  height: 200px;
  border: 1px solid #fff;
}

Set the width and height to that of your image and add a border with a colour that matches your background. We are going to make a border appear when we hover over the image, but when we do this, it tends to offset the image to compensate for the added width the border gives. So adding an ‘invisible’ border now is a bit of a quick and dirty hack to get around this problem.

Try it for yourself! Edit the CodePen at the top and just remove the ‘border: 1px solid #fff;’ line from the figure declaration block (or comment it out with a ‘//’) and have a look at the way the image shifts about as you hover over it.

Now lets get the image to the right size and the caption formatted

figure img {
  width: 300px;
  height: 200px;
}

figcaption a {
  width: 100%;
  color: #fff;
  background: #e40707;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  font-family: verdana;
  font-size: 10pt;
}

figcaption {
  width: 100%;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-family: verdana;
  position: relative;
  bottom: 50%;
}

This bit of code gives the link a button style look to make it stand out a little better and encourage users to click on it. The figcaption is also relatively positioned so it can be shifted up so it lies on top of the image.

Next up, we’re going to add the hover effects

figure:hover img {
  opacity: 0.1;
}

Now when you hover over your image, it immediately fades to an opacity of 0.1. But it’s a bit jarring isn’t it? So lets soften it up with a transition. In the img declaration box, first we need to specify the ‘before’ state

figure img {
  width: 300px;
  height: 200px;
  opacity: 1;
}

Then we specify what we want to transition and how long we want it to take

figure img {
  width: 300px;
  height: 200px;
  opacity: 1;
  -webkit-transition: opacity 0.35s ease;
  -moz-transition: opacity 0.35s ease;
  -o-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
}

The reason that takes 4 lines of code is simply browser compatibility. Hopefully soon enough we’ll only need one line, but for now we need to put all 4 if we want to be certain it’ll work in most browsers.

So in these lines of code, we specify we want the opacity to change, we want it to take 0.35 seconds and that we want the transition to ease. This means the change will be softened at the start and end so it doesn’t ‘hit a wall’ and stop suddenly.

So that’s the basics covered. The figcaption’s movement is done in the same way, by adding a ‘figcaption:hover’ declaration box and changing the CSS to take it to it’s end point. Then use the transition attribute to animate the movement and soften it out.

Here’s the full CSS that I used:

figure {
  background: #fff;
  width: 300px;
  height: 200px;
  border: 1px solid #fff;
}

figure img {
  width: 300px;
  height: 200px;
  opacity: 1;
  -webkit-transition: opacity 0.35s ease;
  -moz-transition: opacity 0.35s ease;
  -o-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
}

figure:hover img {
  opacity: 0.1;
}

figcaption a {
  width: 100%;
  color: #fff;
  background: #e40707;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  font-family: verdana;
  font-size: 10pt;
}

figcaption {
  width: 100%;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-family: verdana;
  position: relative;
  bottom: 50%;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

figure:hover figcaption, figcaption a {
  bottom: 80%;
  opacity: 1;
}

figure:hover {
  border: 1px solid #e40707;
}

And the result below. Feel free to hit edit and have a play and see what effects you can come up with!

 

See the Pen CSS Image Hover Overlay by Emma Wilson (@chilliconcode) on CodePen.