5 CSS Hover Effects With examples
Tags: css, hovereffects
Published: 2023-02-16 22:08:19

Your website can benefit from the addition of interactive and eye-catching [CSS hover effects](https://www.w3tweaks.com/mastering-css-hover-effects-with-demo.html). You can use the following CSS hover effects to improve the design of your website:

## Table Of Contents
   * [Scale Effect](#scale-effect)
   * [Opacity Effect](#opacity-effect)
   * [Background Color Effect](#background-color-effect)
   * [Border Effect](#border-effect)
   * [Box Shadow Effect](#box-shadow-effect)

### Scale Effect: <a name="chapter-1"></a>
When the mouse is hovering over an element, the scale effect makes the element larger. By utilizing the CSS transform property, you may accomplish this.

#### HTML
```
/* HTML */
<div class="box"></div>
```

#### CSS
```
/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.3s ease-in-out;
}

.box:hover {
  transform: scale(1.1);
}
```

---

### Opacity Effect: <a name="chapter-2"></a>
When the mouse hovers over an element, the opacity of that element is altered. The CSS opacity attribute is used to create this effect.
#### HTML
```
/* HTML */
<div class="box"></div>
```
#### CSS
```
/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.3s ease-in-out;
}

.box:hover {
  opacity: 0.5;
}
```

---

### Background Color Effect: <a name="chapter-3"></a>
When the mouse hovers over an element, the background color of that element changes. Utilizing the CSS background-color property, you may accomplish this.

#### HTML
```
/* HTML */
<div class="box"></div>
```
#### CSS
```
/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.3s ease-in-out;
}

.box:hover {
  background-color: red;
}
```

---

### Border Effect: <a name="chapter-4"></a>
When the mouse is hovered over an element, the border of that element changes. This can be done by utilizing the CSS border attribute.
#### HTML
```
/* HTML */
<div class="box"></div>
```
#### CSS
```
/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 2px solid black;
  transition: all 0.3s ease-in-out;
}

.box:hover {
  border: 2px solid red;
}
```

---

### Box Shadow Effect: <a name="chapter-5"></a>
When the mouse is hovered over an element, the box shadow effect adds a shadow to it. By utilizing the CSS box-shadow property, you may accomplish this.
#### HTML
```
/* HTML */
<div class="box"></div>
```
#### CSS
```
/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  transition: all 0.3s ease-in-out;
}

.box:hover {
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
}
```
These are but a few illustrations of the numerous CSS hover effects available for usage on websites. Use them sparingly, and make sure they improve rather than hinder the user experience.

---

## YOU MIGHT ALSO LIKE

- [Mastering CSS Hover Effects With Demo](https://www.w3tweaks.com/mastering-css-hover-effects-with-demo.html)
- [CSS Transition: The Basics Explained](https://www.w3tweaks.com/css-transition-the-basics-explained.html)
- [CSS Hover Animations: Spice Up Your Buttons](https://www.w3tweaks.com/css-hover-animations-spice-up-your-buttons.html)
- [Understanding and Using CSS Float and Clear Properties](https://www.w3tweaks.com/css-float-and-clear-properties.html)
- [CSS Grid and Flexbox: The Essential Layout Systems for Web Design](https://www.w3tweaks.com/css-grid-and-flexbox.html)
- [CSS Positioning: A Beginner’s Guide to Mastering the Position Property](https://www.w3tweaks.com/css-positioning.html)
- [25 Free CSS Search Bars with Expanding Functionalities](https://www.w3tweaks.com/free-css-expanding-search-bar.html)