Subscribe

Creating an Icon Hover Animation: A Short CSS and HTML Tutorial

In the world of web design and development, it’s often the little things that can make a big difference. Icon hover animations are one such element that can add a touch of flare and interactivity to your webpages. In this short tutorial, we will walk you through the process of creating a floating icon gallery with a neat hover animation using HTML and CSS

HTML Code

The first thing you will need to do is set up the HTML structure. This involves creating a div container for the floating gallery and adding individual div elements for each icon. Each div will contain an img element that links to the icon image source. Here’s the HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>Floating Image Gallery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="floating-gallery">
    <div class="gallery-item">
      <img class="gallery-icon" src="icon1.png" alt="Icon 1">
    </div>
    <div class="gallery-item">
      <img class="gallery-icon" src="icon2.png" alt="Icon 2">
    </div>
    <div class="gallery-item">
      <img class="gallery-icon" src="icon3.png" alt="Icon 3">
    </div>
  </div>
</body>
</html>

CSS Code

With your HTML structure set up, you can now start styling your icon gallery and adding the hover effect with CSS. Here’s the CSS code:

.floating-gallery {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-item {
  margin: 10px;
  position: relative;
  cursor: pointer;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.gallery-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 20px;
  object-fit: contain;
  filter: brightness(100%);
  transition: filter 0.3s;
  fill: #fff;
}

.gallery-item:hover .gallery-icon {
  filter: brightness(150%);
}

.gallery-item:active .gallery-icon {
  filter: brightness(80%);
}

This code will create an icon hover animation. The icons will float upwards and the box shadow becomes larger when you hover over them. The icon image also brightens on hover and darkens when clicked.

And there you have it – a straightforward way to add an interactive hover animation to your icons. Adding interactive elements like this make your site more engaging and user-friendly.

Next up

Table of Contents