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"/>
		<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:

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.

http://www.codrops.com

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

Feedback 157

Comments are closed.
  1. Whaat! i just finished your other hover tutorial on one my project now a better one nuuhhh! im guessing this is IE10 up? i will wait for the comments if there is a way for IE 7 – IE 9

  2. Absolutely loving these transistions and hover states. They are all both elegant and functional. I have a couple of site that I know would benefit from how the hover effects work and will make for a cleaner UX. Cheers for sharing.

  3. … You always impress me … Where do you get all those idea :d
    Thanks for everything Mary Lou, I love your design and your tutorial !

  4. MARY, It’s my big pleasure that waiting for your greate tutorial!!! I’m very appriciate for your effort!!!

  5. You’re a life saver! You don’t know how helpful this site has been in the last few years. Stay amazing!

  6. As always, you’ve made something really nice!

    Although, It would be great to have some animations featuring only JS libraries, since they have better performance.

  7. Thank you Mary for all your contributions. I check back several times a week to see if you’ve posted some new nifty tutorial. I’ve learned so much!

  8. Absolutely amazing 🙂 Will work with this in future designs, thanks codrops 😀

  9. Brilliant. I’ve been experimenting with some nice hover effects for a photography site lately, so these are perfect for inspiration.

  10. i’m seeing a strange alignment issue in Firebox v.28 in Mac osx mervicks, is there a glitch on the design, other wise this is perfect.

  11. Amazing.. hover effects,
    i have problem in i mac 24 inch and higher. some image is not covering?

  12. Awesome! Very impresive, only pseudo :before/:after can make it? 🙂
    Great work!

  13. Hi, very fine and nice work.

    i have one answer, how can i link all the , image on ZOE effect and not only the tittle CREATIVE ZOE?

    Thank you!

  14. As always, I am delighted and inspired by these articles. Thanks for the great work.

  15. Wow! This is absolutely incredible, amazing work. You don’t realise how many interactions with the pictures you can have while hovering an image until something puts into perspective, this does. Bookmarked should I never need to use any of the amazing effects!

  16. Great effects, but I was wondering how they will work on mobile devices. Is hover still relevant there?

    • It does rely on hover which isn’t mobile friendly. Some ways around that could be:

      Stylize the button for mobile devices so it’s always visible. Using something like http://modernizr.com
      Use jquery to disable the click event initially.

      Or some combination of both where you use modernizr to add a touch class to the whole thing then using jQuery disable the anchor, toggle the styling back and forth and append a “read more” button that slides down underneath it. This would give mobile users the hover effect on the initial click then a call to action would appear. Tapping it a second time would hide the button and remove the hover state.

      (Thinking about doing that myself on a project)

  17. CSS 3 makes it possible to create unbelievable hover effects that were a horrible nightmare in css 2.1.

  18. These are stunning. I have been looking for some new hover styles for my portfolio. Thanks

  19. Great tutorial, fantastic congrats.

    I saw the images grid are not responsive.
    at minimum size the grid has 1 image per raw.

    is there a way to reduce the images and, for example 1 raw with 4 images(at bigger screen size) becomes 2 raws with 2 images when the screen size is reduced?

    thanks again for the tutorial

    • I reply to myself :p

      at the end of component.css there are the media queries for screen sizes.

      @media screen and (max-width: 69.5em) {}
      @media screen and (max-width: 41.5em) {}

      i can change the .grid figure width to change the grid configuration.

      Hope it could be useful

      thanks again

  20. images in demo are too little, bigger screen than 1935px wide shows background colors…