How to use hover in bootstrap 5?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Bootstrap 5 doesn’t have any specific css for the hover effect but you can create your own class for the hover effect.

To show the hover effect you can use opacity: 0.5 css in hover, below is a sample code for the hover effect class.

.hover-effect:hover {
    opacity: 0.5;
}

Let’s start today’s tutorial hover class effect using CSS

You can use the above hover-effect class on anything like an image, link, text, div, etc.

Here, I will provide an example of the hover effect on image, text, and div.

Mouse over the example using css.

To use hover effects I have created the .hover-effect class.

Now, wherever I have to add hover effects I have to just put the hover-effect class on those images, div, and text.

See the below example and the output of it and I also provide a Try it yourself link.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>Bootstrap hover effect</title>
    <style>
      .hover-effect:hover {
        opacity: 0.5;
      }
    </style>
  </head>

  <body>
    <div class="regionPage">
      <section>
        <h3>Bootstrap hover effect on image</h3>
        <a title="Afghanistan" href="https://aguidehub.com/"
          ><img
            width="200"
            class="img-thumbnail hover-effect"
            src="images/facebook.jpg"
            alt="City"
        /></a>
      </section>
      <section>
        <h3>Bootstrap hover effect on text</h3>
        <p class="hover-effect">aGuideHub</p>

        <h3>Bootstrap hover effect on div</h3>
        <div class="hover-effect">
          aGuideHub: A Guidehub Guide You To Complete Your Task.
        </div>
      </section>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Here, is the output of the above program hover effect in bootstrap See the below image for output.

Bootstrap 5, hover

Here, we are provided code sandbox links for the above program for how to use hover in bootstrap. Then you can use it whenever you want and do the changes as per your requirements.

Try it Yourself

Happy Coding,

I hope the above example with help you to do your task.

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts