<html> <head> <style> .products { position: relative; float: left; height: 200px; width: 200px; border: 1px solid gray; font-family: tahoma; font-size: 12px; margin-left: 10px; cursor: pointer; } .pd-img { position: absolute; top: 5%; left: 5%; height: 90%; width: 90%; } .pd-img:hover { opacity: 0.5; } .pd-des { position: absolute; bottom: 0; height: 0; width: 100%; background-color: lightblue; overflow: hidden; transition: height 1s; text-align: center; } .products:hover .pd-des { height: 100%; transition: height 1s; } </style> </head> <body> <!-- SAN PHAM 1 --><div class="products"> <img class="pd-img" src="http://cdn.tgdd.vn/Products/Images/42/50920/dien-thoai-di-dong-apple-iphone-4S-dienmay.com-b.jpg"/> <div class="pd-des"><br><b>iPhone1</b><br>Màn hình HD<br>Camera 100x</div></div>
<!-- SAN PHAM 2 --><div class="products"> <img class="pd-img" src="http://cdn.tgdd.vn/Products/Images/42/50920/dien-thoai-di-dong-apple-iphone-4S-dienmay.com-b.jpg"/> <div class="pd-des"><br><b>iPhone2</b><br>Màn hình HD<br>Camera 100x</div></div>
<!-- SAN PHAM 3 --><div class="products"> <img class="pd-img" src="http://cdn.tgdd.vn/Products/Images/42/50920/dien-thoai-di-dong-apple-iphone-4S-dienmay.com-b.jpg"/> <div class="pd-des"><br><b>iPhone3</b><br>Màn hình HD<br>Camera 100x</div></div> </body></html>
Hiệu ứng rê chuột hiện chi tiết sản phẩm giống trang thegioididong
4/
5
Oleh
nguyengia
