Ideas for Subtle Hover Effects

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

By in Playground on
Demo Code

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

MotionGrid_featured

How to Create a Motion Hover Effect for a Background Image Grid

Some On-Scroll Text Highlight Animations

Case Study: Windland — An Immersive Three.js Experience

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

Feedback 157

Comments are closed.

  2. Love! Excellent techniques.

    Love also that you said they only work on modern browsers… 😉

  3. I have applied this beautiful effect to my website .
    The transitions work in IE 10. However,the links are not clickable.

    In some transitions,it Is clickable when mouse is hovered on some parts of the h2 headline,in some cases, it is not clickable at all.
    Is there any fix for this?

    • Shrenuj,

      Did you find a solution. This IE 10 issue is exists on the Demo and I have it on my site as well and can’t seem to solve the issue.

      Thanks.

  6. amazing and simply stunning effects , but there would be an effect idea for the fifth one where the bottom caption comes up , we could have a version where the background image goes up too ,
    thank you

  7. They are great, but I need to make it works in IE 7. Does anyone know how to get this using jquery? Thanks.

  10. Hello,

    Thanks !
    I have some problem during the transition. My text and background become blurry (in all browsers , including chrome). I tried -webkit-transform: translateZ(0) transform: translateZ(0) and -webkit-backface-visibility: hidden, but that makes my elements blurry all the time. Any solution ?

  11. These are awesome! Thank you so much.

    I have one question though: How can I switch out the icons in the Zoe effect? I want to place social media icons instead of Feather images. Is there a way to do this? I notice it incorporates :before but how would I go about making it an a element instead?

    Thanks!

  15. Thank you so much for these!
    I used the zoe effect for a shop on The Christian Girl.
    Everything worked perfectly up until about 2 weeks ago. On Chrome( Version 37.0.2062.120) on Mavericks, the text in the center disappears. This even happens for me on the demo. When I hover over the center, the text slides up and then the part that says, “Zoe never had the…” disappears. It will reappear if I scroll. From messing with my site, it goes away if I get rid of overflow:hidden, but then you can see the background block. This only happens in chrome. Any ideas on what is causing it or how to go about fixing it?
    Thanks!

    • Hi Cale,
      the latest Chrome release has several issues on Mac 🙁 I don’t know what’s causing the p in this demo to disappear but adding -webkit-backface-visibility: hidden to figure.effect-zoe p will solve it. Hope it helps and thanks for your feedback, cheers, ML.

  16. Hello, great work! its possible using for commercial usage? – or only for free projects?

    Thanks keep up good work!

  17. Hey Mary. Always love checking in on codrops to see what new demos you have created! Amazing stuff!
    I was wondering if there’s an easy way to have another image fade in on hover state as an addition to the text/frame transitions?

  20. This is incredible. I have so many ideas that I want to implement these effects into. You rock! Thanks a ton!!!

    • It turns out max-width:100%; was causing this problem. Is there a work around for this? Other than not applying max width to the images.

  23. Hello Mary Lou,
    Great job, thanks !
    I have a question, is there a way for keeping the ratio of the pictures when the browser is resized ?

  24. Images do not display big enough when using max-width:100% and you see the background colour. Is there any workaround to be able to use max-width:100%?

  26. Found this at just the right time. Perfect for my next project, thanks a lot for sharing it.

  29. Mary Lou

    You’ve got some great hover effects here.

    I love those where the image zooms in/out such as Silly Chico and the line animations of Wild Romeo and Crazy Layla.

    Do these effects work on all browsers? Including the infamous IE? Plus are these effects ‘sticky’ for mobile browsers?

    Cheers

    Lee

  30. If you use this, you will want to test it in Firefox, as well as the webkit browsers. Text often runs off of right side of picture in demo in Firefox. Looks okay in Chrome. Don’t have windows system to check i.e., but then I don’t care about i.e.

    I love the variety of effects, nice work.

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

  38. 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.

  39. 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.

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

  41. 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)

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

  47. 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