Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng

27 tháng 12, 2013

Khi xem 1 số trang Web bạn vẫn thấy những hiệu ứng rê ảnh khá đẹp, nhưng tiện dụng hơn là nó làm cho mình thấy những mô tả kèm theo hình ảnh đó nữa. Với bài viết này, Thế Giới Blog chia sẻ với bạn Code và cách làm thêm chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng trên Blogger. Với Website khác các bạn dán code tương tự

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
DEMO

Code:


<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/AVvXsEjdwPypJFy_TpJl0g51WGZ-qlZO6djt2U_sgMPPvk7qqpgfVxlotxnovcmWsh55tJlJFMPKdwSXSZGXjYGUPZu_BKKLne98aFaPZib5zBWjpLLoT1YkxnycKII0HPF9_HTSOT9rbO4IAyw/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/AVvXsEguuARgikI3PNFIppc6cgEI5AfEaYda2SpltMLMjneK1W0ayNj6fb2OIcaPbVamMPdipnk_wQZ4FfQTnywSMABUZgg046FDzNNB0s-G6V8-xjlC0eE0zQDpW4rw7LFIdAZZfwKrA_wH-Aw/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ả.