Component Library

B Thumb 

<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. */
  • Content: 
    .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);
        }
    }
}
  • URL: /components/raw/b-thumb/b-thumb.scss
  • Filesystem Path: src/components/boards/b-thumb/b-thumb.scss
  • Size: 296 Bytes

No notes defined.