in Playground

Ideas for Subtle Hover Effects

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

HoverEffectsIdeasNew

View demo Download source

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"/>
		<figcaption>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>
		</figcaption>			
	</figure>

	<!-- ... -->
	
</div>

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

Sadie_Effect

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!

Find this project on Github

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

ScrollingLettersAnimation_Featured

Scrolling Letters Animation

CollapsingLogoEffect_featured

Collapsing Logo Effect

MultiboxMenu

Multibox Menu

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 157

Comments are closed.
  3. 3

    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;
    }

  8. 8

    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.

  9. 9

    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.

  10. 10

    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 { ... }

    to


    figure figcaption,
    figure a { ... }

    also

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

  11. 11

    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)

  16. 16

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

  17. 17

    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?

    Anugeeta

Comments are closed.