Ideas for Subtle Hover Effects

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

HoverEffectIdeas

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.

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

  1. 1

    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!

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=""> <strike> <strong>