Ideas for Subtle Hover Effects

Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.

From our sponsor: Try Mailchimp today.

It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. It’s all about being subtle with that little delightful surprise.

The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions. Note that these will only work in modern browsers.

Sadly, transitions on text in Firefox are not very smooth which influences most of the effects.

The beautiful photography is from Unsplash, a site that brings you 10 free hi-resolution photos every 10 days. The icons used in one of the hover styles is from the Feather icon set by Cole Bemis.

This article was updated on 28 of October 2014 and we’ve added a second set of effects.

For the structure we are simply using a grid with figures:

<div class="grid">

	<figure class="effect-lily">
		<img src="img/1.jpg" alt="img01"/>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>

	<!-- ... -->

With some general styles defined for the grid and its items, we then specify the individual effects.


The following effect, called “Sadie”, will have a pseudo-element with a linear gradient slide in from the bottom and reveal some more text.

The title will change color:

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	content: '';
	opacity: 0;
	transform: translate3d(0,50%,0);

figure.effect-sadie h2 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #484c61;
	transition: transform 0.35s, color 0.35s;
	transform: translate3d(0,-50%,0);

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	transition: opacity 0.35s, transform 0.35s;

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	transform: translate3d(0,10px,0);

figure.effect-sadie:hover h2 {
	color: #fff;
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	transform: translate3d(0,0,0);

We’ve omitted the prefixed properties for the sake of brevity; you will find them in the style sheet.

There are a lot of possibilities and these effects are just a small collection for your inspiration. We hope you enjoy it!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 157

Comments are closed.
  1. I loved the Winston hover effect. But seems like it’s limited to fixed sized images. Any idea to make it work with images of varying height.
    I’m Stuck here.
    figure.effect-winston figcaption:before { position: absolute; top: 0; left: 0; }

  2. I really love those inspiring transition but I’m wondering how to switch or swap the content instead of just making one appear. When hover, hide content one and show content 2, but with the same background image. If anyone can help, that would be amazing!

    Thank you.

  3. Wow your work is so inspirational!!! I’m so impressed by your design and front end skills, all of your work is so beautiful. I particularly enjoy the subtlety of the hover animations with delays of 0.05, 0.15 etc.. your attention to details is just amazing.

  4. Impressive hovers. Thanks for this great work.

    IE 10 dont like the anker in the figcaption 🙁
    I put it direct in figure an Change css:

    figure figcaption, figure figcaption > a { ... }


    figure figcaption, figure a { ... }


    figure figcaption > a {} to figure a {...}

  5. Hi,

    I’ve found an issue. The mouse over effects cause problem on other elements (other box).

    For example try to remove an H2 from the demo page and see. (the issue is on chrome)

  6. Lovely stuff but surely it would be better if this worked for mobile since that is where we’re heading

  7. Hi

    The noisy terry hover effect works fine on desktop but does not work on the mobile.
    Could you please let me know if it’s going to be fixed?