Tạo khung mô tả chuyên nghiệp cho ảnh

Trong bài viết nay, mình sẻ hướng dẫn các bạn làm khung mô tả cho ảnh cực đẹp cho blog hoặc website bằng jQuery và không thể thiếu được CSS và HTML

Cấu Trúc HTML



Chúng ta bắt đầu bắt tay vào công việc nhé.
Đoạn code HTML sau để trình bày nội dung ảnh và mô tả nhé:

<div>
<div class="smooth-caption">
 <div>
 <a href="http://www.vnsys.info"><img class="https://lh4.googleusercontent.com/-JcDnKl81fyE/VCq-3GB9H6I/AAAAAAAADpM/AtI0xA90fL4/s0/542abedb67080.jpg" /></a>
 </div>
 <div class="info-box">
 <div class="caption">
 Thẻ thành viên của Minh Nhựt làm bằng photoshop, chúc các bạn nghiên cứu JQuery vui vẻ.
 </div>
 </div>
</div>

Đến CSS nhé

.smooth-caption {
border: 1px solid #f5f5f5;
margin: 10px;
display: inline-block;
position: relative;
}
 
.smooth-caption img {
vertical-align: top;
}
 
.info-box {
background: #000000;
color:#fff;
width:100%;
bottom: 0px;
left: 0px;
opacity: 0.8;
position: absolute;
}
 
.caption {
font-family: "tahoma", "arial";
font-weight: 700;
font-size:10px;
padding: 10px;
position:relative;
}

Hộp thông tin sẻ nằm ở góc dưới của ảnh.Chúng ta chỉnh opacity thành 0.8 (80%) để làm mờ thành phần này đi, làm trông chuyên nghiệp hơn

ĐỀ MÔ CLICK VÀO ẢNH ĐỂ XEM

Demo khung mô tả chuyên nghiệp

jQuery:

$(window).load(function(){
$('.info-box').fadeOut(0);
 
$('.smooth-caption').hover(
 function(){
 $(this).children('.info-box').slideToggle('fast');
 },
 function (){
 $(this).children('.info-box').slideToggle('fast');
 }
);
 
});

Chúc các bạn thành công