Hover ra background - text - image khác
Bạn đang muốn làm hiệu ứng hover đổi chữ - backgroud đơn giản bằng CSS nhưng bạn không muốn sử dụng Javascritp và Jquery. Hôm nay mình sẽ hướng dẫn cho các bạn làm hiệu ứng hover bằng css và các hiệu ứng chuyển đổi nhẹ nhàng bằng transition
.gif)
HTML
<div class="hover-line">
<p> Xin chào </p>
<div class="animation-1">
<h2>Thiết kế online</h2>
</div>
</div>
CSS
.hover-line{
position: relative;
height: 300px;
border-radius: 15px;
background-color: #ff5f5f;
}
.hover-line p{
text-align: center;
font-size: 34px;
line-height: 96px;
}
.animation-1 {
position: absolute;
top: 0;
height: 100%;
left: 0;
z-index: 5;
padding: 25px;/p>
opacity: 0; //làm class biến mất
transition: all 1s ease-in-out;//transition hiện ra nhẹ nhàng
font-size: 28px;
background: rgba(0, 0, 0, 0.46);//background trong suốt
}
.animation-1 h2{
position: absolute;
color: white;
top: 50%;
margin: 0;
left: 0;
width: 100%;
text-align: center;
}
.hover-line:hover .animation-1{
opacity: 1;//Khi hover vào class hover-line thì class animation-1 sẽ hiện ra
}
