Creating Custom Hover Effects With CSS, Part 1

• September 15, 2018
• Written by jwalker
• 3 Comments

Used correctly, hover effects are an awesome way to add polish to your website. And though it may seem impossible to code yourself, they are not as hard as you might think if you have a basic understanding of CSS and HTML. In this series, I’m going to teach you how to create your own custom hover effects using only CSS.

Planning

It is usually a good idea to spend time planning your hover effects. First, you need to think about where to add the hover effect. Sometimes a poorly placed hover effect can actually be a distraction. A well placed hover effect will give a user feedback about an interactive feature or direct their attention to an important point on the page.

I would recommend spending some time looking at how hover effects are used on other sites for inspiration. Here are some really great ones from Codrops that give you an idea about what is possible with hover effects. I’m going to keep things more basic for this series. You may even find it helps to sketch out a story board of how the effect will unfold.

The HTML

How you structure your HTML matters, too. You will need to choose an HTML element that will serve as your container. Usually this is going to a block element like a figure or a div. In my example, I am going to use an article element.

Think of the article element like a box. It is holding four smaller “boxes” which are:

• a element from line 4 (yes, this is valid code)
• h2 element from line 8
• p element from line 12 (which has a class of date)
• p element from line 16 (no class)

These four elements can also contain elements such as the time element within the paragraph, but for our purposes we are focused on the container (article) and its four direct children. Because we are going to manipulate how and where these appear with our CSS properties.

Start With the End in Mind

I like to start by trying to styling how I want the container to look at the end of my hover effect. This is how page renders by default (not counting fonts, etc.).

This is how I want my article to look when someone hovers.

To make this happen, I will need to move where the elements appear in relation to the article. I’ll also need to make the backgrounds appear behind the date and excerpt. Let’s get to it.

Positioning With CSS

First, let’s rearrange where everything appears using using the position property. A value of position: relative will allow you to move an element relative to its normal place on the page. You can use the left, right, top, or bottom properties to how far and which direction it will be moved. 

For instance a value of top: 10px would have the same effect as placing 10px of padding on the top except it does not affect where any of the elements around it appear. If there were elements below it, nothing would get pushed down like with padding or margin. That means elements can overlap on the page.

If we tried to move all of the elements with relative positioning, we would have another problem though. The space where our paragraphs and heading would end look blank. White space is our friend, but we still want to be able to control it.

That’s  why I am setting the elements I want to move to position: absolute. This value makes the other elements act like it never took up any space in any place so that we can put it where we want it. Where it goes depends on the nearest ancestor with a set position.

So back to our example. We want to move the heading to the top of the article. That means we need to add position: absolute to take it out of the normal page flow. We also need to add position: relative to the article because that’s what we are basing its position on.

If you look at the picture, you can see that the h2 element moved to the top left corner. I also have top: 1rem and left: 1rem applied here to push it off the edge of the article a bit.

I can do the same thing to the paragraphs. First, select the paragraph to move, and then set its positioning. To move the first paragraph I used this declaration:

.date {
	position: absolute;
	bottom: 60%; /* This will show up 60% of the way from the bottom of the article */
}

Since the second paragraph did not have a class name I used a more specific selector and pseudo-class:

.single article p:last-child /* This selects any paragraph that is a last child of an article that is the child of an element with the class "single" */{
	position: absolute;
	top: 32%; 
}

To Be Continued…

If you are new to CSS, then this probably a lot to take in already. I would recommended playing with the DevTools in your browser for practice. Just open a page, right click and choose “Inspect.”

The DevTools will show you the HTML for the page and you can select elements to see how they are styled. You can also try out your own styles, and do a ton of other cool things. You can see this in action in my video. Plus, if you are impatient, you can go directly to part 2 to see how to finish off your styles.