<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>
Xem thêm :
>>> chia sẽ code quảng cáo trượt 2 bên HTML và CSS
Từ khóa : hiệu ứng hover ảnh css3, hiệu ứng hover css3, css hover ảnh, thuộc tính hover trong css, hiệu ứng rê chuột vào ảnh, hiệu ứng rê chuột trong css, image hover effect bootstrap, image hover effects
EmoticonEmoticon