Sublime Text
<!DOCTYPE html> <html> <head> <style type="text/css"> .box{ float: left; position: relative; margin:0px 10px 10px 0px; } img{ width:200px; height:200px; margin:0px; padding: 0px; border:1px solid black; } .title{ position: absolute; width: 100%; bottom:0px; display: none; } .title h3{ margin:0px 0px 0px 8px; color: white; } .title hr{ border:0px; border-bottom:1px solid #ddd; } .title p{ margin: 0px 0px 13px 8px; color:#ddd; } .box:hover img{ opacity: 0.9; } .box:hover .title{ display: inherit; } </style> </head> <body> <div class="box"> <a href="../image/h1.jpg" target="_blank"><img src="../image/h1.jpg"></a> <div class="title"> <h3>Đồng ruộng</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> <div class="box"> <a href="../image/h2.jpg" target="_blank"><img src="../image/h2.jpg"></a> <div class="title"> <h3>Đôi bạn vẹt</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> <div class="box"> <a href="../image/h3.jpg" target="_blank"><img src="../image/h3.jpg"></a> <div class="title"> <h3>Vườn hóa phong lan</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> <div class="box"> <a href="../image/h4.jpg" target="_blank"><img src="../image/h4.jpg"></a> <div class="title"> <h3>Rừng thông</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style type="text/css"> .box{ float: left; position: relative; margin:0px 10px 10px 0px; } img{ width:200px; height:200px; margin:0px; padding: 0px; border:1px solid black; } .title{ position: absolute; width: 100%; bottom:0px; display: none; } .title h3{ margin:0px 0px 0px 8px; color: white; } .title hr{ border:0px; border-bottom:1px solid #ddd; } .title p{ margin: 0px 0px 13px 8px; color:#ddd; } .box:hover img{ opacity: 0.9; } .box:hover .title{ display: inherit; } </style> </head> <body> <div class="box"> <a href="../image/h1.jpg" target="_blank"><img src="../image/h1.jpg"></a> <div class="title"> <h3>Đồng ruộng</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> <div class="box"> <a href="../image/h2.jpg" target="_blank"><img src="../image/h2.jpg"></a> <div class="title"> <h3>Đôi bạn vẹt</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> <div class="box"> <a href="../image/h3.jpg" target="_blank"><img src="../image/h3.jpg"></a> <div class="title"> <h3>Vườn hóa phong lan</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> <div class="box"> <a href="../image/h4.jpg" target="_blank"><img src="../image/h4.jpg"></a> <div class="title"> <h3>Rừng thông</h3> <hr> <p> <span class="span1">Thích</span> - <span class="span2">Bình luận</span> </p> </div> </div> </body> </html>