How to Use Hover Effects in CSS

Author Info

Last Updated: November 26, 2025

When coding a website in HTML/CSS, a fun trick to learn is to add effects when you hover over an item. The first method will teach you how to hover over text to change the CSS. There are many different tricks with the hover selector; the second method will demonstrate how to make an image appear when you hover over text.

Method 1

Method 1 of 2:

Changing the Page Appearance

Download Article

1
Open your HTML editor. Any code editor will work.
2
Write your basic HTML code. Start with the basic skeleton for your page.
```
 <!DOCTYPE html> <html> <head></head> <body> <h1>Hello!</h1> </body> </html>
```
Advertisement
3
Give your item a class. A class is an attribute that lets one style HTML code easily.
```
 <h1 class="testColor">Hello!</h1>
```
4
Link your style to your HTML. There are two ways to do this:
- Link a stylesheet in the head:
  <head> <link rel="stylesheet" href="mystyle.css"> </head>
- Alternatively, code on that page and add the style tag to the HTML:
  <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>Hello!</h1> </body> </html>
5
Call on your class and add :hover in your CSS. The `:hover` selector must be written inside your stylesheet or within the `<style>` block in the `<head>`, not inside the HTML body. To target the class, write a period, then the class name, then `:hover`. Add the hover effects inside the curly brackets.
```
.testColor:hover {
color: pink;
}
```
6
Save and test your code. If working properly, the page will change when you hover over the text.

Method 2

Method 2 of 2:

Making Something Appear

Download Article

1
Write a line of code that you want the hover to be connected to. Use whatever type of tag you want.
2

Create a div tag. A div tag in HTML is a way to create a section (better known as a container) to organize a webpage more easily.
3
Put the items you want to appear in the div tag. You might choose to copy an image URL or add your own images.
4
Give `display:none` to the div in your CSS. This hides the element until the user hovers over the trigger element. Place this rule in your stylesheet or inside your `<style>` block, not inside your HTML tags.
```
.hiddenBox {
display: none;
}
```
5
Add the hover rule in your CSS to make the hidden div appear. `h1:hover + div` must be placed in your stylesheet or inside your `<style>` block. It means: "When the user hovers over the h1, reveal the div directly after it."
```
h1:hover + div {
display: block;
}
```
6
Go to a browser and test your code. If working properly, the items will appear when you hover your cursor over the header.