Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng DEMO |
<style>
#bt_imageeffect {
margin: 20px auto;
width: 100%;min-height: 300px; padding: 20px 0;
text-align: center;
}
.galleryItem {
display: inline-block;;
position: relative;
width: 250px; height: 250px;
padding: 0;margin: 0 20px;
border: solid 10px #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galleryItem img {
width: 250px;height: 250px;
}
.caption {
position: relative;
display: inline-block;
width: 250px; height: 250px;
z-index: 10;
}
.caption::before {
content: attr(data-title);
position: absolute;top: 0; left: 0;
width: 250px; height: 0;
font-family: 'Croissant One', cursive;
font-size: 1.8em;font-weight: 600;
line-height: 1.4em;color: #086FA1;
background: #fff;
overflow: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.caption::after {
content: attr(data-description);
position: absolute;
bottom: -0;left: 0;
width: 250px;height: 0;
font-family: 'Poiret One', cursive;
font-size: 1.1em;
font-weight: 400;
line-height: 1.4em;color: #fff;
background: #222;
overflow: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.caption:hover::before {
height: 125px;
}
.caption:hover::after {
bottom: 0;height: 125px;
}
</style>
<br />
<div id="bt_imageeffect">
<br />
<li class="galleryItem">
<a class="caption" data-description="itviet360.com chia sẻ thủ thuật blogspot, Tự học SEO Web, kiến thức mạng máy tính...và những gì về cuộc sống" data-title="Nature Scene" href="http://www.itviet360.com/">
<img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibkIFkgmDVUAwlbvuWhahfLt4OgT_zg8aC1LFwTBiYcNZ9nvPVl_O2rAg-pruvD5ZiOzOaLLLqMPAp3aUoG3rVfl4RqyHaBGK2y-SglVJaOlxIzv92gS1vaBgyraLSe7H6AaALZDtrido/s1600/Green+Nature+Wallpapers.jpg" />
</a></li>
<li class="galleryItem">
<a class="caption" data-description="Blog hình ảnh đẹp chia sẻ những hình ảnh đẹp và ý nghĩa nhất. Cùng nhau chia sẻ và cảm nhận những hình ảnh đẹp tổng hợp" data-title="SunFlower" href="http://anhdep3.blogspot.com/">
<img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAkos0jWQM43iM50-pEu43TIvNC078MKBqpcwO_aqYgpIhKr7Iq3sUJcVzuxdinAjOeNKoKV0YuYK0nkAI0GWYUkbHdXkxR15mXD6cSVJXW1lhHVDI6lgTgNLSIawAnEes4shLriKrlQs/s1600/nature_3.png" />
</a></li>
</div>
- Trong đó:
Những dòng chữ mô tả bôi đỏ.
- Cách làm thủ thuật trên blogspot
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code trên vào tiện ích vừa thêm :)
3. Lưu lại và xem kết quả.
Không có nhận xét nào:
Đăng nhận xét