Menu
I can't get my head around how to layer a Glyphicon (.glyphicon- zoom-in) over a Bootstrap .img-thumbnail.
The css rule is - content:"\e015";
727
Image Overlay: Image overlay generally refers to the image being a background image and inserting texts, and links inside of that image. It can be done using the 'card-img-overlay' property that is present in bootstrap. Also, we can do it with normal CSS along with a bootstrap theme.
To overlay two elements, one approach is to make a parent position: relative , and then the overlay position: absolute . In this case, this example should work, where the download icon can be any element, such as a bootstrap button. Save this answer.
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. Bootstrap 4 also switch from Less to Sass so you might integrate the font's Sass (SCSS) into your build process, to create a single CSS file for your projects.
HTML:
<div class="wrapper"><img src="..."><span class="glyphicon glyphicon-leaf"></span><div>
CSS:
.wrapper {
position: relative;
}
.wrapper .glyphicon {
position: absolute;
top: 20px;
left: 40px;
}
http://jsfiddle.net/idmean/7672Lt7L/1/ Sweet, isn't it?
148
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
