hover css hiện chữ "View"

 

**** HTML:

<div class="cases-pic posR">

    <a href="#" class="case-link">

        <img src="hình-ảnh.jpg">

        <p>View</p>

    </a>

</div>

**** CSS:

a.case-link p {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    text-align: center;

    display: grid;

    align-content: center;

    z-index: 999999;

    color: white;

    text-transform: uppercase;

    font-size: 18px !important;

    letter-spacing: 5px !important;

    top: -10px;

    opacity: 0;

    transition: .15s ease-in-out !important;

}

p:not(.has-background):last-of-type {

    padding-bottom: 0;

}

a.case-link:hover p {

    top: 0;

    opacity: 1;

}

.cases-pic img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.cases-pic img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.cases-pic:hover img {

    transform: scale(1.05);

    box-shadow: 0 12px 30px rgba(100, 100, 255, 0.3);

}