Ideas for Subtle Hover Effects

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

From our monthly sponsor: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. Try it for free.

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:

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

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

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.
  1. These are stunning. I have been looking for some new hover styles for my portfolio. Thanks

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

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

  4. Love! Excellent techniques.

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

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

  8. 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 ?