5 CSS Hover Effects With examples

Your website can benefit from the addition of interactive and eye-catching CSS hover effects. You can use the following CSS hover effects to improve the design of your website:

Table Of Contents

• Scale Effect
• Opacity Effect
• Background Color Effect
• Border Effect
• Box Shadow Effect

Scale Effect:

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:

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:

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:

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:

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
• CSS Transition: The Basics Explained
• CSS Hover Animations: Spice Up Your Buttons
• Understanding and Using CSS Float and Clear Properties
• CSS Grid and Flexbox: The Essential Layout Systems for Web Design
• CSS Positioning: A Beginner’s Guide to Mastering the Position Property
• 25 Free CSS Search Bars with Expanding Functionalities