Menu
I am trying to apply a simple hover effect for a section of thumbnails in Bootstrap.
<div class="regionPage">
<section class="thumbs">
<h3>Full list:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="thumbnail" title="Afghanistan" href="../asia/afghanistan.php"><img src="../images/covers/afghanistanthumb.jpg" alt="Afghanistan"></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="thumbnail" title="Argentina" href="../samerica/argentina.php"><img src="../images/covers/argentinathumb.jpg" alt="Argentina"></a>
</div>
Maybe to just make the image slightly opaque on hover. For some reason I cannot get this to work
204
What is a CSS Hover Effect? A CSS hover effect takes place when a user hovers over an element, and the element responds with transition effects. It is used to mark the key items on the web page and it's an effective way to enhance the user experience.
Hover Bootstrap CardsA box-shadow is declared for the card class attribute value then a hover selector specifies that the card will scale up and a darker box-shadow will appear when the user hovers over the card. To recreate the hover, just add these two main CSS declarations to your project.
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
Just do it in the following way--
example snippet
.thumbnail:hover {
background-color: red;
opacity: 0.5;
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="regionPage">
<section class="thumbs">
<h3>Full list:</h3>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="thumbnail" title="Afghanistan" href="../asia/afghanistan.php"><img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Afghanistan"></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<a class="thumbnail" title="Argentina" href="../samerica/argentina.php"><img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Argentina"></a>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
