Hover ảnh

 

**** HTML:

<section class="step-card col-sm-3 horizontal-left">

    <figure class="d">

      <div class="qu-popup">

      <div class="workPopWrap" style="height:auto">

       <img src="//d3a1v57rabk2hm.cloudfront.net/japancratecom/joybox_mist-Compressed-Images-copy-279/images/hank_2.0.png?ts=1603303301&amp;host=japancrate.com" style="width:270px !important;" class="img-responsive img-center hoverBtn">

     

      <div class="offerPopup hidden-xs" style="bottom: 80%; display: none;">         

        <h5 class="heading">About Me</h5>         

        <p>

        Rocket League Bronze league player, purveyor of experiences, and occasional freestyle rapper.  Spirit animal: Psyduck.  

        </p>

        <h5 class="heading">Favorite Past Items</h5>

        <p>

           Uha Shigekix Super Sour Gumy, BBQ Scone Chips, Oranamin C.

        </p>         

        <div class="arrow"></div>        

        </div>

    </div>

    </div>

    </figure>

    <br class="visible-xs">

    <br class="visible-xs">

    <h5 class="heading">Hank</h5>

    <p>Chairman</p>

</section>

**** CSS

.offerPopup>.arrow,.offerPopup>.arrow:after{

position:absolute;

display:block;

width:0;

height:0;

border-color:transparent;

border-style:solid;

}

.offerPopup>.arrow{

border-width:11px;

margin-left:-10px;

left:50%;top:100%;

border-top-color:rgba(103, 103, 103, 0.25);

}

.offerPopup>.arrow:after{

border-width:10px;

content:"";

} 

.offerPopup>.arrow:after{

content:" "; 

bottom:1px; 

margin-left:-10px; 

border-bottom-width:0; 

border-top-color:#fff

} 

.popover>.arrow{

left:50%; 

margin-left:-11px; 

border-bottom-width:0; 

border-top-color:#999; 

border-top-color:rgba(0,0,0,0.25); 

bottom:-11px

}

**** JS:

$('.hoverBtn').hover(

function(){

  $(this).parents('.workPopWrap').find('.offerPopup').fadeIn()

}, 

function(){

  $(this).parents('.workPopWrap').find('.offerPopup').fadeOut()

}

)

******************************************

**** HTML

<div class="giaodien-img">

    <div class="view">

        <img src="images" class="img-responsive product-img" alt="product" title="product">

            <div class="mask">

                <h2>Tiêu đề</h2>

                <a href="/" class="info product-more">Chi tiết</a>

            </div>

            <a href="/"><h2>Tiêu đề</h2></a>

    </div>

</div>

**** CSS

.giaodien-img {

    border: 1px solid #e1e1e1;

    margin-bottom: 30px;

}

.view {

    border: 1px solid #fff;

    overflow: hidden;

    position: relative;

    text-align: center;

    background: #fff;

    height: 268px;

}

.product-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.view img {

    display: block;

    position: relative;

    -webkit-transition: all 0.2s ease-in;

    -moz-transition: all 0.2s ease-in;

    -o-transition: all 0.2s ease-in;

    -ms-transition: all 0.2s ease-in;

    transition: all 0.2s ease-in;

}

.view .mask {

    background-color: rgba(0,0,0,0.6);

    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

    -webkit-transform: translate(460px, -100px) rotate(180deg);

    -moz-transform: translate(460px, -100px) rotate(180deg);

    -o-transform: translate(460px, -100px) rotate(180deg);

    -ms-transform: translate(460px, -100px) rotate(180deg);

    transform: translate(460px, -100px) rotate(180deg);

    -webkit-transition: all 0.2s 0.4s ease-in-out;

    -moz-transition: all 0.2s 0.4s ease-in-out;

    -o-transition: all 0.2s 0.4s ease-in-out;

    -ms-transition: all 0.2s 0.4s ease-in-out;

    transition: all 0.2s 0.4s ease-in-out;

}

.view .mask {

    width: 100%;

    height: 100%;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0;

}

.view h2 {

    /* text-transform: uppercase; */

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 17px;

    /* font-weight: bold; */

    padding: 0px;

    margin-top: 28%;

    -webkit-transform: translateY(-100px);

    -moz-transform: translateY(-100px);

    -o-transform: translateY(-100px);

    -ms-transform: translateY(-100px);

    transform: translateY(-100px);

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

    font-family: Arial;

}

.view a.info {

    display: inline-block;

    text-decoration: none;

    padding: 7px 14px;

    color: #fff;

    -webkit-transform: translateY(-200px);

    -moz-transform: translateY(-200px);

    -o-transform: translateY(-200px);

    -ms-transform: translateY(-200px);

    transform: translateY(-200px);

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

    margin: 0 10px;

    margin-top: 10%;

}

.view:hover .mask {

    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

    -webkit-transition-delay: 0s;

    -moz-transition-delay: 0s;

    -o-transition-delay: 0s;

    -ms-transition-delay: 0s;

    transition-delay: 0s;

    -webkit-transform: translate(0px, 0px);

    -moz-transform: translate(0px, 0px);

    -o-transform: translate(0px, 0px);

    -ms-transform: translate(0px, 0px);

    transform: translate(0px, 0px);

}

.view:hover a.info {

    -webkit-transform: translateY(0px);

    -moz-transform: translateY(0px);

    -o-transform: translateY(0px);

    -ms-transform: translateY(0px);

    transform: translateY(0px);

    -webkit-transition-delay: 0.3s;

    -moz-transition-delay: 0.3s;

    -o-transition-delay: 0.3s;

    -ms-transition-delay: 0.3s;

    transition-delay: 0.3s;

}

.view:hover h2 {

    -webkit-transform: translateY(0px);

    -moz-transform: translateY(0px);

    -o-transform: translateY(0px);

    -ms-transform: translateY(0px);

    transform: translateY(0px);

    -webkit-transition-delay: 0.5s;

    -moz-transition-delay: 0.5s;

    -o-transition-delay: 0.5s;

    -ms-transition-delay: 0.5s;

    transition-delay: 0.5s;

}

.view a.info {

    display: inline-block;

    text-decoration: none;

    padding: 7px 14px;

    color: #fff;

    -webkit-transform: translateY(-200px);

    -moz-transform: translateY(-200px);

    -o-transform: translateY(-200px);

    -ms-transform: translateY(-200px);

    transform: translateY(-200px);

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

    margin: 0 10px;

    margin-top: 10%;

}

.product-more {

    background: #0F75BC;

}

.product-more:hover, 

.product-zoom:hover {

    background: #EE2229;

}

**************************************

****HTML

<div class="news-home-pic">

    <a href="javacript:void(0)">

        <img src="images">

        <span class="roll-tim"></span>

    </a>

</div>

**** CSS

.news-home-pic {
    position: relative;
}

.roll-tim {

    width: 100%;

    height: 100%;

    position: absolute;

    background-color: rgba(142,191,227, 0.6);

    transition: ease-in-out 0.3s;

    opacity: 0;

    visibility: hidden;

    top: 0;

    left: 0;

    background-position: center center;

    background-repeat: no-repeat;

    font: normal normal normal 14px/1 FontAwesome;

}

.roll-tim:before {

    content: '+';

    color: #fff;

    width: 40px;

    height: 40px;

    top: 3%;

    right: 3%;

    text-align: center;

    line-height: 35px;

    display: block;

    position: absolute;

    transform: scale(0);

    transition: ease-in-out 0.4s;

    font-size: 36px;

}

.news-home-pic  a:hover .roll-tim {

    opacity: 1;

    visibility: visible;

    transition: ease-in-out 0.3s;

}

.news-home-pic  a:hover .roll-tim:before {

    transform: scale(1);

    transition: ease-in-out 0.4s;

}