Mới làm giúp thằng bạn cái mẫu hiển thị sản phẩm, nó yêu câu khi mouse được di chuyển vào vùng hình ảnh(hove) thi hiển thị 2 cái button, thây cũng hay nên post lên chia sẻ.
Mẫu này xây dự cơ bản nên rất dễ tùy chỉnh ^^!
Full Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.procduct {
margin: 5px;
padding: 5px;
height: 150px;
width: 150px;
border: 1px solid #F00;
float: left;
}
.image {
z-index: -1;
position: absolute;
}
.overlay {
padding-top: 65px;
padding-left: 17px;
display:none;
}
.procduct:hover .overlay {
display:block;
}
.procduct:hover .image {
opacity:0.50;
}
.bt1 {
float: left;
margin: 5px;
padding: 5px;
background-color: #0F0;
}
.bt2 {
margin: 5px;
padding: 5px;
float: left;
background-color: #F69;
}
.clear {
clear: both;
}
-->
</style>
</head>
<body>
<div class="procduct">
<div class="image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8RxN5TLqFg3YglD1C9U_m9GHSUfYQzlCTRjeI4yHcix9rT1MuoWCCbktWxqbRRp8hkEBF42P2I-qmoqaT9jLBdtAH46aN0a0v1ZDaPMHj_2izLhlA7PBbGlvsXcvp4_4INU9VnNsE08/s1600/VNLIVES.NET-HTML-CSS-PRODUCT-TEMPLATE.png"/>
</div>
<div class="overlay">
<div class="bt1">BT 01</div>
<div class="bt2">BT 02</div>
<div class="clear"></div>
</div>
</div>
<div class="procduct">
<div class="image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8RxN5TLqFg3YglD1C9U_m9GHSUfYQzlCTRjeI4yHcix9rT1MuoWCCbktWxqbRRp8hkEBF42P2I-qmoqaT9jLBdtAH46aN0a0v1ZDaPMHj_2izLhlA7PBbGlvsXcvp4_4INU9VnNsE08/s1600/VNLIVES.NET-HTML-CSS-PRODUCT-TEMPLATE.png"/>
</div>
<div class="overlay">
<div class="bt1">BT 01</div>
<div class="bt2">BT 02</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.procduct {
margin: 5px;
padding: 5px;
height: 150px;
width: 150px;
border: 1px solid #F00;
float: left;
}
.image {
z-index: -1;
position: absolute;
}
.overlay {
padding-top: 65px;
padding-left: 17px;
display:none;
}
.procduct:hover .overlay {
display:block;
}
.procduct:hover .image {
opacity:0.50;
}
.bt1 {
float: left;
margin: 5px;
padding: 5px;
background-color: #0F0;
}
.bt2 {
margin: 5px;
padding: 5px;
float: left;
background-color: #F69;
}
.clear {
clear: both;
}
-->
</style>
</head>
<body>
<div class="procduct">
<div class="image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8RxN5TLqFg3YglD1C9U_m9GHSUfYQzlCTRjeI4yHcix9rT1MuoWCCbktWxqbRRp8hkEBF42P2I-qmoqaT9jLBdtAH46aN0a0v1ZDaPMHj_2izLhlA7PBbGlvsXcvp4_4INU9VnNsE08/s1600/VNLIVES.NET-HTML-CSS-PRODUCT-TEMPLATE.png"/>
</div>
<div class="overlay">
<div class="bt1">BT 01</div>
<div class="bt2">BT 02</div>
<div class="clear"></div>
</div>
</div>
<div class="procduct">
<div class="image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8RxN5TLqFg3YglD1C9U_m9GHSUfYQzlCTRjeI4yHcix9rT1MuoWCCbktWxqbRRp8hkEBF42P2I-qmoqaT9jLBdtAH46aN0a0v1ZDaPMHj_2izLhlA7PBbGlvsXcvp4_4INU9VnNsE08/s1600/VNLIVES.NET-HTML-CSS-PRODUCT-TEMPLATE.png"/>
</div>
<div class="overlay">
<div class="bt1">BT 01</div>
<div class="bt2">BT 02</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment