<style>
body {
background: #414852;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin: 6% auto 0;
}
.single-card {
position: relative;
width: 280px;
height: 400px;
margin: 15px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s ease;
overflow: hidden;
background: #414852;
border-radius: 15px;
transition: all 0.8s ease-in-out;
}
.single-card:hover {
transform: translateY(-10px);
}
.img-area {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.img-area img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.img-area:hover img {
transform: scale(1.1);
}
.overlay {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0, 174, 255, 0.8);
opacity: 0;
transition: opacity 0.3s ease;
}
.single-card:hover .overlay {
opacity: 1;
}
.add-to-cart, .view-details {
background-color: #fff;
color: #333;
padding: 10px 15px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
margin-bottom: 10px;
}
.add-to-cart:hover, .view-details:hover {
background-color: orangered;
color: #fff;
border: none;
}
.info {
padding: 10px;
text-align: center;
color: #ddd;
}
.info h3 {
margin: 15px 0 10px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Bebas Neue', sans-serif;
}
.info .price {
margin: 0;
font-size: 30px;
font-weight: bold;
color: aqua;
}
</style>
<div class="wrapper">
<div class="single-card">
<div class="img-area">
<img src="https://w.ladicdn.com/60988adb4f31f60012f43f81/muong-go-han-quoc-ccb5a783-20240719150548-8mmxp.jpg" alt="">
<div class="overlay">
<button class="add-to-cart">Blog Gỗ</button>
<button class="view-details">View Details</button>
</div>
</div>
<div class="info">
<h3>Muỗng Gỗ</h3>
<p class="price">Đang Cập nhật,...</p>
<p>Mô tả : Muỗng cán dài dùng khuấy trà, cà phê.</p>
</div>
</div>
<div class="single-card">
<div class="img-area">
<img src="https://w.ladicdn.com/s250x250/60988adb4f31f60012f43f81/thot-go-teak-lnmli034wepmfc-20240723154106-7vqhj.jpg" alt="">
<div class="overlay">
<button class="add-to-cart">Blog Gỗ</button>
<button class="view-details">View Details</button>
</div>
</div>
<div class="info">
<h3>Thớt Gỗ Teak</h3>
<p class="price">Đang Cập nhật,...</p>
<p>Mô Tả : Thớt Gỗ Chữ Nhật, Chuyên Dùng Chế Biến Thực Phẩm Trong Gian Bếp.</p>
</div>
</div>
<div class="single-card">
<div class="img-area">
<img src="https://w.ladicdn.com/s250x250/60988adb4f31f60012f43f81/khay-go-7r98o-ll6ng1kacfjq12-20240723153144-xawas.jpg" alt="">
<div class="overlay">
<button class="add-to-cart">Blog Gỗ</button>
<button class="view-details">View Details</button>
</div>
</div>
<div class="info">
<h3>Khay Gỗ Decor</h3>
<p class="price">Đang Cập nhật,...</p>
<p>Mô Tả : Thích hợp dùng làm phụ kiện chụp ảnh,... </p>
</div>
</div>
</div>
Muỗng Gỗ
Đang Cập nhật,...
Mô tả : Muỗng cán dài dùng khuấy trà, cà phê.
Thớt Gỗ Teak
Đang Cập nhật,...
Mô Tả : Thớt Gỗ Chữ Nhật, Chuyên Dùng Chế Biến Thực Phẩm Trong Gian Bếp.
Khay Gỗ Decor
Đang Cập nhật,...
Mô Tả : Thích hợp dùng làm phụ kiện chụp ảnh,...
