CODEWITHSUNDEEP
csstwitter-bootstrap-3glyphicons
Leandro Bardelli
Leandro Bardelli

Reputation: 11578

Bootstrap 3 - Glyphicon over image

I'm trying to make a thumbnail with bootstrap3.

How can I make this, I mean to put this zoom-in glyphicon over the image?: (sorry for paint shop :D)

Desired:

Actually, I've got this:

enter image description here

with the following code:

<div class="thumbnail PNET-thumbcolor">
 <div class="PNET-cursor-hand center-block text-center">
  <img data-src="holder.js/140x140" alt="Producto">
   <span class="glyphicon glyphicon-zoom-in"></span>
  </div>
  <div class="caption">...
  </div>
</div>

Is there a way to make this with CSS only, without touching the bootstrap style?

Thanks in advance! Please comment or ask if you need more information and/or improve! :)

UPDATE:

JSFIDDLE: http://jsfiddle.net/Leandro1981/AKwb4/1/

Upvotes: 0

Views: 4688

Answers (1)

Luca Detomi
Luca Detomi

Reputation: 5716

I edit only CSS, adding a position relative to Lens icon, and set a fixed width to container.

.PNET-cursor-hand
{
    width:140px;
}

.PNET-thumbcolor .glyphicon-zoom-in
{
    position:relative;
    top:-20px;
    right:5px;
    text-align:right;
    display:block;
}

Here the demo

Upvotes: 2

Related Questions