How to use hover in bootstrap 5?
May 08, 2022Hi 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.
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.
Happy Coding,
I hope the above example with help you to do your task.