10 Modern Logo Hover Effects with HTML and CSS

By Faraz - August 28, 2024

Explore 10 stylish hover effects for logos using HTML and CSS. Learn how to implement rotate, scale, skew, flip, grayscale, blur, brightness, shake, translate, and pulse effects.

Join us on Telegram

Read Also

Create a Glassmorphism Calendar with HTML, CSS, and JavaScript

In the world of web design, adding unique hover effects to logos can enhance the user experience and make your site stand out. Hover effects bring interactivity and visual appeal to your designs, making them more engaging. In this blog, we’ll explore ten modern and eye-catching hover effects for logos using simple HTML and CSS. Each effect will be showcased with step-by-step instructions.

Rotate: The Rotate effect makes your logo spin around its center when hovered over. This effect adds a playful touch to your site’s design.
Scale Up: The Scale-up effect enlarges your logo slightly, making it more prominent when a user hovers over it. This effect is great for drawing attention.
Skew: The Skew effect tilts your logo on the X-axis, giving it a dynamic and modern look when hovered over.
Flip: The Flip effect flips your logo horizontally, creating a fun and engaging visual change on hover.
Grayscale: The Grayscale effect removes color from your logo, turning it into shades of gray. This effect can create a sleek and professional look.
Blur: The Blur effect adds a soft blur to your logo on hover, giving it a dreamy and sophisticated appearance.
Brightness: The Brightness effect increases the brightness of your logo on hover, making it stand out with a more vivid look.
Shake: The Shake effect creates a slight shaking motion for your logo, adding a playful and energetic touch on hover.
Translate: The Translate effect moves your logo upwards on hover, creating a subtle but noticeable movement.
Pulse: The Pulse effect makes your logo gently grow and shrink in size, creating a pulsing effect that draws attention.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create our HTML File. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Here’s a breakdown of the structure and functionality:

1. Document Type and Language:

<!DOCTYPE html>
<html lang="en">

Specifies that this is an HTML5 document and the language used is English.

2. Head Section:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logo Hover Effects</title>
    <link rel="stylesheet" href="styles.css">
</head>

<meta charset="UTF-8">: Sets the character encoding to UTF-8 for supporting a wide range of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive, adjusting to different screen sizes.
<title>Logo Hover Effects</title>: Sets the title of the webpage that appears in the browser tab.
<link rel="stylesheet" href="styles.css">: Links to an external CSS file named styles.css for styling the page.

3. Body Section:

<body>
    <div class="effects-container">
        ...
    </div>
</body>

The body contains a div with the class effects-container that houses various logo effects.

4. Effects Container:

<div class="effects-container">
    ...
</div>

This div acts as a wrapper for all the effect examples.

5. Effect Wrappers: Each effect is contained in a div with the class effect-wrapper. Inside each wrapper:

<div class="effect-wrapper">
    <p class="effect-name">Effect Name</p>
    <div class="effect-box effectX">
        <img src="image_url" alt="Effect X">
    </div>
</div>

<p class="effect-name">Effect Name</p>: Displays the name of the effect.
<div class="effect-box effectX">: This div contains the logo image and applies a specific CSS class (like effect1, effect2, etc.) to demonstrate different hover effects.
<img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect X">: Displays a favicon image for each effect. The alt attribute provides alternative text for the image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logo Hover Effects</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="effects-container">
        <div class="effect-wrapper">
            <p class="effect-name">Rotate</p>
            <div class="effect-box effect1">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 1">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Scale Up</p>
            <div class="effect-box effect2">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 2">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Skew</p>
            <div class="effect-box effect3">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 3">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Flip</p>
            <div class="effect-box effect4">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 4">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Grayscale</p>
            <div class="effect-box effect5">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 5">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Blur</p>
            <div class="effect-box effect6">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 6">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Brightness</p>
            <div class="effect-box effect7">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 7">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Shake</p>
            <div class="effect-box effect8">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 8">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Translate</p>
            <div class="effect-box effect9">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 9">
            </div>
        </div>
        <div class="effect-wrapper">
            <p class="effect-name">Pulse</p>
            <div class="effect-box effect10">
                <img src="https://www.codewithfaraz.com/favicon.ico" alt="Effect 10">
            </div>
        </div>
    </div>
</body>
</html>

Read Also css tips how to add text on an image with mix-blend-mode.jpg

CSS Tips: How to Add Text on an Image with Mix-Blend-Mode

Step 2 (CSS Code):

Once the basic HTML structure of the logo is in place, the next step is to add styling to the logo using CSS. Here’s a detailed explanation of each section:

Body Styling

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

display: flex;: Uses Flexbox layout to center content.
justify-content: center;: Horizontally centers content within the body.
align-items: center;: Vertically centers content within the body.
height: 100vh;: Makes the body take up the full height of the viewport.
margin: 0;: Removes default margin.
background-color: #f5f5f5;: Sets a light gray background color.
font-family: Arial, sans-serif;: Uses Arial font or a similar sans-serif font.

Effects Container

.effects-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

display: flex;: Uses Flexbox to layout children.
flex-wrap: wrap;: Allows child elements to wrap onto multiple lines.
justify-content: center;: Centers child elements horizontally.
gap: 20px;: Adds a 20-pixel gap between child elements.

Effect Wrapper

.effect-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

display: flex;: Uses Flexbox for layout.
flex-direction: column;: Arranges children in a vertical column.
align-items: center;: Centers children horizontally within the wrapper.

Effect Name

.effect-name {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

margin-bottom: 10px;: Adds a 10-pixel space below the element.
font-size: 16px;: Sets the font size to 16 pixels.
font-weight: bold;: Makes the text bold.
color: #333;: Sets the text color to a dark gray.

Effect Box

.effect-box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

width: 100px; and height: 100px;: Sets dimensions for the box.
display: flex;: Uses Flexbox for centering contents.
justify-content: center; and align-items: center;: Centers the image inside the box.
overflow: hidden;: Hides any content that overflows the box.
border-radius: 10px;: Rounds the corners of the box.
background-color: #fff;: Sets the background color to white.
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);: Adds a subtle shadow for a 3D effect.
transition: transform 0.3s ease, box-shadow 0.3s ease;: Smoothly animates changes to transform and box-shadow properties.

Effect Box Image

.effect-box img {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

width: 80px; and height: 80px;: Sets dimensions for the image inside the box.
transition: transform 0.3s ease, filter 0.3s ease;: Smoothly animates changes to transform and filter properties.

Hover Effects on Effect Box

.effect-box:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

transform: scale(1.1);: Scales up the box to 110% of its size on hover.
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);: Increases the shadow for a more pronounced effect on hover.

Specific Hover Effects

Each effect class (effect1, effect2, etc.) targets different hover animations:

effect1:hover img { transform: rotate(360deg); }: Rotates the image 360 degrees.
effect2:hover img { transform: scale(1.5); }: Scales the image up to 150%.
effect3:hover img { transform: skewX(20deg); }: Skews the image along the X-axis.
effect4:hover img { transform: scaleX(-1); }: Flips the image horizontally.
effect5:hover img { filter: grayscale(100%); }: Applies a 100% grayscale filter.
effect6:hover img { filter: blur(3px); }: Applies a 3-pixel blur filter.
effect7:hover img { filter: brightness(150%); }: Increases brightness by 150%.
effect8:hover img { animation: shake 0.5s ease-in-out; }: Triggers a shake animation.
effect9:hover img { transform: translateY(-20px); }: Moves the image up by 20 pixels.
effect10:hover img { animation: pulse 1s infinite; }: Triggers a pulse animation that repeats indefinitely.

Keyframes for Animations

@keyframes shake: Defines a shaking animation by moving the image horizontally.
@keyframes pulse: Defines a pulsing animation by scaling the image up and down.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

.effects-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.effect-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.effect-name {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.effect-box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.effect-box img {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.effect-box:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.effect1:hover img {
  transform: rotate(360deg);
}

.effect2:hover img {
  transform: scale(1.5);
}

.effect3:hover img {
  transform: skewX(20deg);
}

.effect4:hover img {
  transform: scaleX(-1);
}

.effect5:hover img {
  filter: grayscale(100%);
}

.effect6:hover img {
  filter: blur(3px);
}

.effect7:hover img {
  filter: brightness(150%);
}

.effect8:hover img {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.effect9:hover img {
  transform: translateY(-20px);
}

.effect10:hover img {
  animation: pulse 1s infinite;
}

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

Final Output:

Read Also creating stunning neubrutalism cards with html and css.jpg

Creating Stunning Neubrutalism Cards with HTML and CSS

Conclusion:

These ten modern hover effects can add a unique flair to your logo and enhance the overall user experience on your website. By implementing these effects with simple HTML and CSS, you can create a more interactive and visually appealing design. Experiment with these effects and find the perfect combination that matches your website's style and branding.

Feel free to customize the effects and adjust the parameters to suit your needs.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: logo hover effects, css hover effects, modern logo hover effects html css, stylish logo animation effects, creative hover effects for logos, hover effect for logo, hover logo

End of the article

Latest Post

Create an Hourglass Timer Loader using HTML and CSS

by Faraz - September 13, 2024

Learn how to create a simple hourglass timer loader using HTML and CSS. Follow our step-by-step guide for a visually appealing and functional loader.

Countdown

Quick and Easy Countdown Timer with HTML, CSS, and JavaScript

September 13, 2024

Clock

Create Glowing Analog Clock with HTML, CSS, and JavaScript

September 12, 2024

Modal

Create Draggable Modal Using HTML, CSS, and JavaScript

September 03, 2024

Navbar

Create Sticky Bottom Navbar using HTML and CSS

August 29, 2024

Create Animated Logout Button Using HTML and CSS

by Faraz - August 08, 2024

Learn to create an animated logout button using simple HTML and CSS. Follow step-by-step instructions to add smooth animations to your website’s logout button.