**** 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);
}
