This article originally posted on Medium
View Demo here: Reveal On Hover <div> (Codepen).
For a recent project I was tasked with the challenge of flexing my ‘absolute positioning’ muscle(s). I felt as though having some element floating on the screen (other then the
<nav>) would muss up the design and make it obvious it didn’t belong…
I knew I wanted to include a ‘Reveal-On-Hover’ (ROH)
<div> or two. Once I started exploring this effect, I found out it was created with absolutely positioned elements. BAM!, BAM !— Two birds, one stone.
Here’s a look at the finished effect (Check out the full code on CodePen):
This effect is high-impact, and not that difficult to achieve. To accomplish it, we layer
<divs> using z-index and some ::before pseudo-element wizardry.
Here is what you need to create your hover
And then inside your container put an empty
<span> enclosed by an
Also in the container
<div> insert another
<div> to hold the background.
And one last
<div> to hold the text.
We want to arrange the elements of the container to make our ROH
<div>. Starting from the top, this is what we need:
The link (if it gets stuck under another element, we can’t click it).
The background::before (this appears as the overlay on our background, we’ll turn the opacity from 90% to 10% create the reveal effect).
Now for the CSS:
Since our container
<div> will be the basis for the position of all other elements, let’s go ahead and make it relative and set the width:
Next up is the full-div link. We know we want it to take up the entire space of the div, so let’s use that
<span> to make it happen:
We want to pretty much repeat this on the
<div> containing the background to ensure that the background also takes up the entire space of the
<div>. Be sure to include background-size: cover; so that the image doesn’t look zoomed-in.
Also, this is the
<div> we want on the bottom of our stack, so give it a low z-index. This is also where we want to make all the CSS transition magic happen, so let’s set that too:
Next, let’s include the overlay. We’ll do this with a ::before pseudo-element. The z-index has to be greater than that of the background, but less than that of the link:
Next, style your text
<div> however you like. Be sure to set position: relative and the z-index between your ::before element and your link element. The text doesn’t have to be grey in the inital state, but mine will be:
Finally, let’s add in the hover states. We want the background opacity to decrease, and the font color to change:
Please let me know if you have any questions by leaving a comment below, or you can get me on Twitter @jennyveens.
Check out the full code on CodePen.