LearnCSS Hover Effects for Photos

One of the most popular courses on Treehouse is How to Make a Website, which walks through the process of building a complete portfolio site from scratch. However, even after completing the course, the learning is only just beginning. Thousands of students have customized the example project and made it their own, for everything from displaying family photos to showcasing their favorite animals.

The course teaches how to build a basic site, but there’s plenty of enhancements that could be added. As an example, here’s how to add CSS hover effects to the photos in the image gallery.

Before: A Simple Website

Here’s what the image gallery looks like before adding the hover effects.

View Demo on CodePen

The page is responsive and features an image gallery with five portfolio pieces. The gallery itself is composed of an unordered list, and each list item contains a link with a nested image inside. By itself, this is pretty decent, but it might be fun to add a nice hover effect. Keep in mind that the hover state generally doesn’t work on mobile devices, but it can’t hurt to add it for desktop users, as long as it’s just an enhancement and not an essential site function.

After: Adding Hover Effects

Here’s the image gallery looks like with the hover effects added. Check out the site in a new window and try hovering over the images.

View Demo on CodePen

This effect is created by adding some simple CSS. If you already have a pre-existing website, you modify the selectors to make this code work with your own custom markup. Here’s the code, followed by a quick breakdown of how it works:

#gallery li {
  perspective: 250px;
}

#gallery a img {
  transition: 100ms;
  transform: translateZ(0px);
  box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

#gallery a img:hover {
  transform: translateZ(25px) rotate(3deg);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}

• Each list item has the perspective property. By default, the vanishing point for the 3D effect is at the center of the selected element, so in this case, each list item will be a separate 3D context. If the perspective property were instead applied to some parent element higher in the DOM tree, the images would instead move outwards away from the center of the page. This could be a desirable effect, depending on your goals.
• The gallery images all have a transition of 100 milliseconds. This means that if anything about the gallery images changes (such as styling applied on hover), they should animate to that new state over the specified time period. By default, there is no transform and there is also no box-shadow.
• On the hover state for the gallery images, a translation on the Z axis is applied along with a slight rotation. This is a neat effect on its own, but adding a box shadow below the image helps to sell the effect of the image lifting off the page. In this case, the opacity of the shadow will animate along with the shadow’s blur radius, giving the effect of the shadow becoming increasingly fuzzy the further away it moves from the page.

Share Your Own Customizations

If you’ve taken the How to Make a Website course and made your own customizations, I’d love to hear about them in the comments!

• learn programming
• make a website