Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
Đôi lúc khi lướt web bạn tình cờ 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 người xem thấy những mô tả kèm theo hình ảnh đó nữa. trong bài viết này, mình 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 Blogspot. Với Website khác các bạn dán code tương tự nhé
 |
| 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/AVvXsEj8MBj5OgEvi79oJoEujl0XKgAbZ17dd_MeIfwK0m9MPMStDFaA1tUZob7Z4i8TxJuGTL35BuWPXuElX1zt29E9NfrTSSAq7XaXvksYkXj34xhZa_Q1uEhjh0FR7TaaZNFE87ei1tNLDEo/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/AVvXsEjYxrwsHFZxNqaPTURWpELOKaWS6cZswuv0wsblGFPn2w0uzErgrUMDMDq4aTSjncUrkWWy8OlExNr4R6XafKUvpo7vnAsZxFy1E-yrCy5A8fzJqXNKKasutgJ9_4IyS-VffltPsc1lR6Y/s1600/nature_3.png" />
</a></li>
</div>- Trong đó:
Những dòng chữ mô tả bôi xanh đỏ.
- 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ả nhé.
Nguồn: In4mau.blogspot.com
Không có nhận xét nào: