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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 125

  1. 1

    Lovely effect ML, well done (again!).

    Can anyone explain why on Safari the images are not scaled? It appears they only show the top-left corner of the image, maybe 10% of the total image as it should be displayed, kind of like it’s zoomed in on this part of the image.

    Don’t get this effect on other browsers, or on mobile iOS…

    Any help appreciated!

    Greg

    • 2

      Hi Greg,
      I am having the same issue with images being skewed in Safari. Any luck getting a solution?

    • 3

      Hi Lizie, no – no reply as yet. Also would be interested if anyone has found a way to get the hover-effect to link on ‘click’… saw one idea to wrap the with a link but that didn’t seem to work for me… :(

    • 4

      Hi Greg,
      It’s been a few month and I’m circling back around to this scaled images issue in Safari. Still no answers?

    • 5

      Hi Greg,

      So, I found a solution. It’s a change in the CSS. For .grid figure img — comment out any min-height and min-width that you may have there. This is working for me.

      .grid figure img {
      position: relative;
      display: block;
      /* min-height: 100%;
      max-width: 100%;*/
      opacity: 0.8;
      }

  2. 6

    Hi can some one tell me in what versions of browsers this plugin works well
    in mobile – android, ios, windows
    in desktop – IE , Chrome , Safari , Firefox and Opera

  3. 7

    I’m not sure why you have the link inside the figure. You can’t click on them in IE9 or IE10 in my testing. I wrapped the figure tag with the link tag and you can now click on the effects in IE.

    • 8

      Hi Brian, I am looking at trying to get the images and captions to ‘link’ after the hover. I tried adding an <ahref tag either side of the tags but that didn’t seem to work for me… can you post your code in a reply please? Many thanks. Greg

  4. 10

    Aww it makes me so sad. It used to work I guess, but today when I installed it and tried adding the plugin it said:

    “Unpacking the package…

    Installing the plugin…

    The package could not be installed. No valid plugins were found.

    Plugin install failed.”

    In my wordpress.

  5. 12

    I am assuming we just add this to my child themes style.css sheet? or is there anything else I need to do?

  6. 13

    Is anyone gettting an issue were every once in a while the image doesnt show, just the overlay color?

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>