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:

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:

<button class="my-button">Hover Me</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.

p:hover {
  color: red;
}

h2:hover {
  text-decoration: underline;
}

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

a:hover {
  color: orange;
  text-decoration: none;
  background-color: #f2f2f2;
}

img:hover {
  opacity: 0.7;
}

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

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

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

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

.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.

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

button:hover {
  background-color: navy;
}

.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);
}

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

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

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

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

.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);
}