Tạo chú thích cho ảnh kiểu 1

.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{
position: absolute;
width: 95%; /* Độ rộng của bảng chú thích */
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* Độ trong suốt của bảng chú thích */
color: Yellow; /* Màu chữ */
-moz-border-radius: 12px 12px 12px 12px; /* Kích thước bo tròn cho bảng chú thích */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white; /* Màu chữ của link liên kết */
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}
</style>

<div class=”imagepluscontainer” style=”height: 320px; width: 240px; z-index: 2;”>
<img src=”Link ảnh” />
<div class=”desc”>
Nhập lời chú thích tại đây <a href=”http://anhdepblog.blogspot.com/2012/04/anh-ong-mat-troi-mat-trang-va-trai-at.html”>TẠI ĐÂY</a> Chúc các bạn vui vẻ.</div>
</div>