Image hover caption with zoom effect in bootstrap

I am unable to align image to the width of caption with maintaining the gutter width. I am using bootstrap and also the image is flowing outside the div on hover. Can anybody help me out ?

This is what i am trying to achive : https://awwapp.com/s/43b68655-83a6-4133-ab28-0ec9a4152316/

Pen : http://codepen.io/anon/pen/XbxOMq

HTML :

HOTSPOT TEXTf

<div class="col-md-4 hotspot-wrapper">
    <img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
    <div class="hotspot-text">
      HOTSPOT TEXTf
    </div>
  </div>
</div>

<div class="col-md-4 hotspot-wrapper">
    <img src="https://newevolutiondesigns.com/images/freebies/hd-widescreen-wallpaper-3.jpg" alt="..." class="img-responsive">
    <div class="hotspot-text">
      HOTSPOT TEXTf
    </div>
  </div>
</div>

CSS:

.hotspot-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom:20px;
}
.hotspot-text {
  width:100%;
    height: 102px;
    position: absolute;
    bottom: -50px;
  transition: all .2s linear;
  background: rgba(0,0,0,.7);
  color:#fff;
}  
.hotspot-wrapper:hover .hotspot-text {
  bottom: 0;
}

.hotspot-wrapper img {

  -webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

.hotspot-wrapper:hover img {
  -webkit-transform:scale(1.3);
transform:scale(1.3);
}


Source: html5

Leave a Reply