Home » Thu thuat
CSS3 hiệu ứng đổi hình ảnh đẹp cho Web, blogspot
Với thủ thuật thêm 1 đoạn code CSS3 sẽ làm cho hình ảnh và trang Web, blog của bạn thêm sống động hơn.
bài viết này mình giới thiệu về đoạn code CSS3 thay đổi hình ảnh khá đẹp mắt khi rê chuột vào.
Demo: http://360anhdep.blogspot.com/p/a.html
Code:
- Dán code đó vào vị trí các bạn cần thêm nhé/
Tags:
Thu thuat
bài viết này mình giới thiệu về đoạn code CSS3 thay đổi hình ảnh khá đẹp mắt khi rê chuột vào.
Demo: http://360anhdep.blogspot.com/p/a.html
Code:
<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
</style>
<a class="nowandthen" href="http://itviet360.com">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHaIBssmuAPVSsos0L9loP2yw_JIT4uTEaOcgIOxK2MSg9p4dUfpsPavEgbB27RotH4RKQ-ENqnd8OsgRnaRbZBw6W74uxajGUmdZX36N3Hs6fpIZS-fkC2nu9Y4uySH2OmOVmILOxow/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKEoiDxs5LZ79X2Ccni8Z4wc9efigrGaMB1H8wama6S2K9eN01PeII_8OEsw8iieZ8ETT8n4BYTrEo61WCHf8at3QfYlUZww8bW2dbJBfxNr2INXw51IN8tShC6f_SC1JTs0IXnz_3Lc/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>
- Dán code đó vào vị trí các bạn cần thêm nhé/

- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Code Javascript tạo thêm đồng hồ cho Website, blog
- Hướng dẫn cách chat nhóm trên Facebook (FB)
- Hướng dẫn cách chụp ảnh màn hình trên Windows 8
- Cách cài đặt Password cho Windows 8 - mật khẩu User Admin
- Xem Blogspot với nhiều giao diện khác nhau
- Ký tự đặc biệt đẹp chèn vào trong Yahoo, Facebook...
- Page number Navigation - Code phân trang đẹp cho blogspot
- Sửa lỗi bàn phím PC, Laptop bị khóa trên win 7, XP, 8
- Khung chia sẻ bài viết blogspot hiển thị chi tiết tác giả bài viết
- Tùy chình tiện ích nhãn (label Widget) màu đen cho blogspot
- Sửa lỗi (error ) phân trang (pagenavi) trong Blogspot
Comments[ 0 ]
Đăng nhận xét