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 144

  1. 1

    Hi
    I love the layla effect. I am a complete newbie. Is there any way you can help me how can I add the Lyla effect to my pictures on my website? I have already downloaded the source, but dont really know what to do with it.

    Here is what I have done so far.
    1. Add new Row in my page
    2. Add Visual Editor to the row
    3. Add new image in the visual editor.

    After this i tried to add the Lyla Effect code (from set1 file in HoverEffectIdeas\css) to the CSS Styles next to my Visual Editor and saved it. Nothing happened.

    I definitely know i am doing it wrong. Would highly appreciate any help.

    Rgds
    Joy

  2. 2

    Hi I am a newbie to webdesigning in wordpress. I sutumbled upon your Layla effect and fell in love with it.

    I have downloaded the source file, but dont know what to do with it. I know i have to copy paste it somewhere, but dont know where, is it in the theme’s CSS (under EDITOR)? or should it be on the page where i want the images with Layla effect?

    I tried to add a row to my page and then add new Visual Editor to it, then paste the Layla code in the CSS settings text box right next to it, not much of help. Please dont laugh if this was something really obvious :)

    Will be great full for any help on this one.

  3. 3

    Hi mary,
    i’m using the “layla” Hover effect
    everything was working great on every browser for a long time
    but today iv’e noticed that on chrome the grid is braking and the hover dosent work
    iv’e ask around, and no one could figure it out
    and then i remembered that i had this same problem a while ago when chrome was updated and someone wrote here a line of code to put in the “layla” css sheet that fix it (and it seems that now has stooped working)

    do you know of this problem? any suggestions?

    tnx
    shiran

  4. 5

    Great effects. They’re really impressive. I implemented them into a site I’m currently developing. Seemed to work fine across all browsers until I tested it on iPhones and iPads and the Click state for “OSCAR http://tympanus.net/Development/HoverEffectIdeas/“, unfortunately didn’t seem to do anything. Is anyone else experiencing this issue on iPhones or iPads?

  5. 6

    Is it possible to do the same effect on a background image instead to do it directly on an image? Thanks to everybody who will answer!

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>