CSS - Hover


Basic Syntax

In CSS, the :hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse pointer. It allows you to create interactive and engaging visual effects on your web pages. The general syntax for using the :hover pseudo-class is as follows:

Example: General Syntax

selector:hover {
  property: value;

Here, selector represents the element you want to apply the hover effect to, and property and value define the CSS properties and their corresponding values that will be applied when the element is hovered over.

Let's take a look at a simple example that shows how to use the :hover pseudo-class to create a hover effect on a button:

HTML Button Example

<button class="my-button">Hover Me</button>

Example: CSS Rules for Button

.my-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

.my-button:hover {
  background-color: navy;

In this example, we have a button with the class my-button. The default styles for the button are set using the .my-button selector, which gives it a blue background color, white text color, some padding, no border, and a pointer cursor.

To create the hover effect, we use the .my-button:hover selector. Inside this selector, we specify the CSS properties that will be applied when the button is hovered over. In this case, we change the background-color to navy, which is a darker shade of blue.

Now, when the user hovers their mouse over the button, the background color will change from blue to navy, providing visual feedback to the user that the button is interactive.

The :hover pseudo-class can be applied to various elements such as text, links, images, and more, allowing you to create a wide range of hover effects to improve the user experience on your website.

Applying Hover Effect to Different Elements

The :hover pseudo-class can be applied to various elements on a web page to create visually appealing and interactive effects. Let's see how to apply hover effects to different types of elements.

Text Elements

To apply hover effects to text elements, you can use the :hover pseudo-class with CSS properties like color, text-decoration, font-size, and font-weight.

Example: Hover effects on paragraph

p:hover {
  color: red;

Example: Hover effects on heading

h2:hover {
  text-decoration: underline;

Example: Hover effects on span

span:hover {
  font-size: 18px;
  font-weight: bold;


Applying hover effects to images can make them more engaging and interactive. You can adjust the image opacity, apply scale transforms, or add borders and box shadows.

Example: Hover effects on image opacity

img:hover {
  opacity: 0.7;

Example: Hover effects on gallery images

.gallery img:hover {
  transform: scale(1.1);

Example: Hover effects on thumbnails

.thumbnail:hover {
  border: 2px solid #333;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);


Buttons are interactive elements that benefit from hover effects. You can change the button background color, add or adjust borders, or apply box shadows and text shadows to create visually appealing button states.

Example: Hover effects on buttons

button:hover {
  background-color: #45a049;

Example: Hover effects on buttons with borders

.btn:hover {
  border: 2px solid #ff5500;

Example: Hover effects on custom buttons

.custom-button:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

Advanced Hover Effects

CSS offers techniques to create visually stunning and interactive hover effects. Let's look at some of these advanced hover effects, including transitions, animations, and gradients.


CSS transitions let you transition between two states of an element. To use transitions, you need to specify the CSS properties you want to transition and the duration of the transition.

Example: Transitioning color on hover

button {
  background-color: blue;
  transition: background-color 0.3s ease;

button:hover {
  background-color: navy;

You can also transition multiple properties at once:

Example: Transitioning multiple properties on hover

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 0.3s, height 0.3s, transform 0.3s;

.box:hover {
  width: 300px;
  height: 300px;
  transform: rotate(45deg);


CSS animations let you create more complex and dynamic hover effects. With animations, you can define keyframes that specify the styles of an element at different points in the animation timeline.

Example: Animating an element on hover

@keyframes pulse {
  0% {
    transform: scale(1);
  50% {
    transform: scale(1.2);
  100% {
    transform: scale(1);

.icon:hover {
  animation: pulse 1s infinite;

You can create various types of animations, such as fading effects, sliding effects, or rotations, to improve the hover experience.


CSS gradients let you create color transitions. You can apply gradient backgrounds to elements and create interesting hover effects by transitioning between different gradient colors.

Example: Gradient background on hover

.button {
  background: linear-gradient(to right, #ff7f50, #ff2d55);
  transition: background 0.3s;

.button:hover {
  background: linear-gradient(to right, #ff2d55, #ff7f50);

You can also create hover effects with gradient borders:

Example: Gradient border on hover

.card {
  border: 4px solid transparent;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, #ff7f50, #ff2d55);
  background-origin: border-box;
  background-clip: content-box, border-box;

.card:hover {
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, #ff2d55, #ff7f50);

By combining transitions, animations, and gradients, you can create a wide range of advanced hover effects to make your web pages more interactive and engaging.