+1
Thắc mắc về hover trong css
Em đang làm một cái hiệu ứng giống như trang f8 đó là khi hover vào thì sẽ có một div khác xuất hiện đè lên nhưng em chưa biết phải làm ntn cho đúng....
Mong nhận được sự chỉ giáo của các cao nhân ạ, em cảm ơn ^^
UPDATE:
Em đã hiểu được cách anh Sơn làm nhưng anh ấy đang để ảnh là background-img nhưng của em muốn nó là thẻ img 
3 CÂU TRẢ LỜI
+2
Hiệu ứng này cũng khá dễ implement. Bạn sử dụng position: relative / absolute là được.
<div class="card-image-root">
<img
class="card-image"
src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
>
<div class="card-image-overlay">
<a class="card-button" href="javascript:alert(1);">
Click me
</a>
</div>
</div>
.card-image-root {
max-width: 300px;
height: auto;
position: relative;
}
.card-image-overlay {
display: none;
border-radius: 20px;
}
.card-image {
width: 100%;
border-radius: 20px;
}
.card-image-root:hover .card-image-overlay {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
position: absolute;
top: 0;
left: 0;
}
.card-button {
padding: 0.5rem 1.5rem;
border-radius: 10px;
background: white;
border: none;
cursor: pointer;
color: red;
text-decoration: none;
}
em đang muốn khi hover vào thì nó sẽ có một cái div khác đc đè lên img ấy bác (
Bạn share code lên đi để mn dễ support.