<a href="../../../img/dummy.png" class="b-thumb col-11 col-md-5 col-lg-3 btn btn-reset p-0 px-lg-1 position-relative ml-1 ml-lg-0 mb-lg-1 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h-200">
<div class="captions position position-absolute position-z-2 position-50-50 bg bg-color-white-075 p-3 w-100 h-100 d-flex align-items-center justify-content-center">
<p class="text mb-0">Texto</p>
</div>
<span class="c-zoom position-absolute d-lg-flex flex-lg-wrap align-items-lg-center p-lg-1">
<span class="image mr-2 mr-lg-1">
<img src="../../../img/zoom.png" alt="" class="img img-auto img-w-lg-2">
</span>
<span class="text text-color-white text-uppercase pr-2 pr-lg-0">ampliar imagen</span>
</span>
</a>
<a href="../../../img/dummy.png" class="b-thumb col-11 col-md-5 col-lg-3 btn btn-reset p-0 px-lg-1 position-relative ml-1 ml-lg-0 mb-lg-1 overflow-hidden">
<img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h-200">
<div class="captions position position-absolute position-z-2 position-50-50 bg bg-color-white-075 p-3 w-100 h-100 d-flex align-items-center justify-content-center">
<p class="text mb-0">Texto</p>
</div>
{{> @c-zoom
c_zoom_text_cont="ampliar imagen"
c_zoom_class="position-absolute d-lg-flex flex-lg-wrap align-items-lg-center p-lg-1"
c_zoom_text_class="text-color-white text-uppercase pr-2 pr-lg-0"
c_zoom_image_class="mr-2 mr-lg-1"
c_zoom_image_img_class="img-auto img-w-lg-2"
}}
</a>
/* No context defined. */
.b-thumb {
.captions {
opacity: 0;
}
&:hover {
.captions {
opacity: 1;
}
}
.c-zoom {
top: .5rem;
left: .5rem;
z-index: 2;
@include breakpoint(desktop) {
width: calc(100% - 1rem);
}
}
}
No notes defined.