Tạo 1 Image Captions với css

Trong bài viết này Yolks sẽ hướng dẫn với các bạn 1 hiệu ứng chú thích ảnh cực độc đáo để các bạn có thể gây ấn tượng với các bạn đọc cũng như tăng thêm vẻ đẹp cho bài viết 1 cách hoành tráng và tuyệt vời









Xin lưu ý: những hiệu ứng mà yolks đề cập đến đây là ko sử dụng Javascript nên vì vậy blog sẽ load nhanh , nhưng cũng ko gây trở ngại đến tốc độ là bao, hiệu ứng này sử dụng dc với mọi trình duyệt. Đây là điểm quan trong nhất của thủ thuật này
1.Thêm css vào blog:

.imgteaser {
    margin: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
.imgteaser a {
    text-decoration: none;
    float: left;
}
.imgteaser a:hover {
    cursor: pointer;
}
.imgteaser a img {
    float: left;
    margin: 0;
    border: none;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
}
.imgteaser a .more {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 1.2em;
    color: #fff;
    background: #000;
    padding: 5px 10px;
    filter:alpha(opacity=65);
    opacity:.65;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
    display: block;
    font-size: 1.2em;
    padding: 10px 0;
    background: #111;
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
    color: #fff;
    position: absolute;
    bottom: 11px;
    left: 11px;
    padding: 10px;
    margin: 0;
    width: 566px;
    border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
    display: block;
    margin-bottom: 5px;
    font-size:1.5em;
}
.imgteaser a .desc {    display: none; }
.imgteaser a:hover .more { visibility: hidden;}

2.Cách add vào bài viết:

<div class="imgteaser">
<a href="#">
    <img src="Link ảnh" alt="Thẻ alt" />
    <span class="more">&raquo; Learn More</span>
    <span class="desc">
        <strong>Tên ảnh</strong>
        chú thích ảnh ở đây.
    </span>
</a>
</div> 

3.Xem thành quả: