I need to make the hover effect on some thumbnails. What I want is when I hover over it, the same image appears with an opacity of 70% and white text.
I'm doing it with bootstrap so I put the class img-responsive
e in the thumbnails img-circle
because I want them to have a circular shape.
HTML:
<section class="row text-center col-md-12 center-block text-center">
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img class="img-responsive img-circle" src="images/1.jpg" alt="1" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/2.jpg" class="img-responsive img-circle" alt="2" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/3.jpg" class="img-responsive img-circle" alt="3" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/4.jpg" class="img-responsive img-circle" alt="4" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/5.jpg" class="img-responsive img-circle" alt="5" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/6.jpg" class="img-responsive img-circle" alt="6" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/7.jpg" class="img-responsive img-circle" alt="7" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="rings">
<a href="webdesign.html">
<img src="images/8.jpg" class="img-responsive img-circle" alt="8" />
</a>
</div>
</div>
</section>
Here is an example of how you could do it with explanations in the CSS.
I had to modify the structure of the HTML a bit to be able to style the text. That is, I have added an
<div>
intern.It is a responsive solution, which centers the thumbnail on the
<div>
.Here is a possible alternative. What it does:
span
absolute position that will contain the text and will be hidden.span
is centered using atranslate
-50% transformation horizontally and vertically.span
with the text will be displayed and the image will be highlighted with aopacity:0.7
.Here is a demo adding those changes to your code: