Hello các bạn! Chào mừng bạn trở lại với Blog Vozshare, hôm nay mình xin hướng dẫn các bạn Cách tạo hiệu ứng khi di chuột qua hình ảnh trong Blogger. Khi nói đến trang web, hình ảnh rất quan trọng vì chúng để thu hút sự chú ý của người truy cập.
 |
| How To Make Responsive Image Hover Effect In Blogger |
Để thu hút sự chú ý của người dùng, nhiều trang web sử dụng các hiệu ứng và phong cách khác nhau cho hình ảnh của họ và một trong số đó là Hiệu ứng Di chuột Hình ảnh, Vì vậy, trong bài viết này tôi sẽ cung cấp cho các bạn hướng dẫn về Hiệu ứng Di chuột Hình ảnh trong Blogger. Làm theo tất cả các bước đơn giản để triển khai trong Trang web Blogger của bạn.
Hiệu ứng di chuột qua hình ảnh là gì
Hiệu ứng Di chuột qua hình ảnh là quan trọng nhất của nhiều thiết kế trang web như Phóng to hình ảnh hoặc khi con trỏ được đưa lên hình ảnh hoặc chúng có thể kích hoạt nhiều hoạt ảnh di chuột.
Hiệu ứng di chuột tạo ra sự tương tác và chuyển động cho một thiết kế, mang đến trải nghiệm trang web năng động hơn. Cho dù chúng chỉ ra một liên kết đang hoạt động hay kích hoạt một loạt hoạt ảnh, hiệu ứng di chuột sẽ mang lại cho bạn hiệu ứng tức thì khi con trỏ được đưa vào nó. Họ có thể hướng dẫn khách truy cập thực hiện một hành động mong muốn hoặc đóng vai trò như một tác phẩm trang trí nghệ thuật làm sống động không gian kỹ thuật số và Hiệu ứng Di chuột được sử dụng để thu hút sự chú ý của người dùng.
Ưu điểm của hiệu ứng di chuột qua hình ảnh
- Thu hút sự chú ý của khách truy cập
- Hiệu ứng Di chuột mới cho hình ảnh của bạn
- Thay đổi giao diện hình ảnh mặc định của bạn thành hiệu ứng mới này
- Giao diện động cho trang web của bạn
Hãy ‘Bắt đầu!
Trước khi bắt đầu, hãy xem Demo về Hiệu ứng Di chuột qua Hình ảnh trong blogger
Cách tạo hiệu ứng khi di chuột qua hình ảnh trong Blogger
Có 3 Chính 3 bước để thêm Hiệu ứng Di chuột qua Hình ảnh trong Blogger của bạn. Bạn cần thêm HTML, CSS và JS, hãy làm theo các bước đơn giản dưới đây.
Bước 1: Sao chép và dán mã HTML đã cho bên dưới vào một bài đăng / trang mà bạn muốn thêm Hiệu ứng Di chuột Hình ảnh này
<div class="Main-IH3"><figure class="snip1543">
<img alt="sample108" src="https://blogger.googleusercontent.com/img/a/AVvXsEimrwS_MJ9ewLpOkRIZqr93gcXRN_ZWrqcu-QkWO_jQJkVGuI8D0xeJeqVGc7JMcInTIxR7XYRkkcuUVXkrH18dwD6oCdunZm6YRqepxeockEQkZQRYZ98DEA8uoZk8XHDIAxv4wGMBqfSZcHksvqfJ_LOCnG5bSQ6yYE71XkSY6NHyX-G14gudRhPhGg" />
<figcaption>
<h3>Vozshare</h3>
<p>Blogger Tips & Tricks</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1543"><img alt="sample100" src="https://blogger.googleusercontent.com/img/a/AVvXsEgJ8tI0KbWLuQ1k7NM7N2Hxeffu2hXQ1YxJaQbSMiLfY8scm3QcPjTiB6PJeRufiBDN9sXSDBbXZAuf6YH21JkRD1qBHcETGotBHvuaqg7UIMXmvkfdKzaDJjmhuhd_csfOskzkze2V6c27HywxpI-ZYF_3KOwEhM-zxSYCAiVXLzsYITdBS2iQMnoqLg" />
<figcaption>
<h3>Image Hover Effect</h3>
<p>Blogger Tips & Tricks</p>
</figcaption>
<a href="#"></a>
</figure>
<figure class="snip1543"><img alt="sample101" src="https://blogger.googleusercontent.com/img/a/AVvXsEiAjRZVwU8i6tmQFA0e9C8p2qJC7HtgerGMCsQDhgk-6_A1bC-iYeMImcjNqg9AyMkR6h8MktKOVAvYux3sPYVzmf6qpyG4w2ODWATKXVFWISU1ln6Cl4fqh7EIcQbkEI1LuM7h8D9xuudaJ2J-RCgeoHwg0y-ucveLAVY7UbVFC7FeJ-9OuDtQYiKYhg" />
<figcaption>
<h3>Vozshare</h3>
<p>Widegts and codes</p>
</figcaption>
<a href="#"></a>
</figure></div>
Thay đổi văn bản được đánh dấu và tiêu đề, liên kết hình ảnh và mô tả của bạn theo yêu cầu của bạn
Bước 2: Sao chép và dán CSS dưới đây vào bài đăng / trang của bạn nếu bạn chỉ sử dụng Hiệu ứng Di chuột qua hình ảnh này trong bài đăng / trang cụ thể hoặc nếu không, bạn có thể dán CSS này ở trên ]]></b:skin>.
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Teko:700);
.Main-IH3{display:flex;justify-content:center;align-items:center;flex-flow:wrap;margin:0;height:100%;}
.snip1543 {
background-color: #fff;
color: #ffffff;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
margin: 10px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1543 img {
backface-visibility: hidden;
max-width: 100%;
vertical-align: top;
}
.snip1543:before,
.snip1543:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color:#ff4a03;
opacity: 0.5;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1543:before {
-webkit-transform: skew(30deg) translateX(-80%);
transform: skew(30deg) translateX(-80%);
}
.snip1543:after {
-webkit-transform: skew(-30deg) translateX(-70%);
transform: skew(-30deg) translateX(-70%);
}
.snip1543 figcaption {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
bottom: 0;
padding: 25px 40% 25px 20px;
}
.snip1543 figcaption:before,
.snip1543 figcaption:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #b81212;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
content: '';
opacity: 0.5;
z-index: -1;
}
.snip1543 figcaption:before {
-webkit-transform: skew(30deg) translateX(-100%);
transform: skew(30deg) translateX(-100%);
}
.snip1543 figcaption:after {
-webkit-transform: skew(-30deg) translateX(-90%);
transform: skew(-30deg) translateX(-90%);
}
.snip1543 h3,
.snip1543 p {
margin: 0;
opacity: 0;
letter-spacing: 1px;
}
.snip1543 h3 {
font-family: 'Teko', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1em;
text-transform: uppercase;
}
.snip1543 p {
font-size: 0.9em;
}
.snip1543 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0.9;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.snip1543:hover:before,
.snip1543.hover:before {
-webkit-transform: skew(30deg) translateX(-20%);
transform: skew(30deg) translateX(-20%);
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.snip1543:hover:after,
.snip1543.hover:after {
-webkit-transform: skew(-30deg) translateX(-10%);
transform: skew(-30deg) translateX(-10%);
}
.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
-webkit-transform: skew(30deg) translateX(-40%);
transform: skew(30deg) translateX(-40%);
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
-webkit-transform: skew(-30deg) translateX(-30%);
transform: skew(-30deg) translateX(-30%);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
</style>
Nếu Muốn Màu Nền Thay Đổi Mã Màu Được Đánh Dấu
Bước 3: Sao chép và dán đoạn mã javascript đã cho bên dưới vào bài đăng / trang.
<script>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
</script>
Phần kết luận
Trong bài viết này, mình đã chia sẻ Hướng dẫn từng bước về Cách tạo hiệu ứng khi di chuột qua hình ảnh trong Blogger, mình hy vọng bạn sẽ thích Hiệu ứng di chuột qua hình ảnh này. Nếu muốn có thêm các Kiểu Di chuột Hình ảnh như thế này, vui lòng cho tôi biết trong phần bình luận, Mình sẽ chia sẻ thêm những bài viết về các Hiệu ứng di chuột qua hình ảnh. Chúc các bạn thành công!
Bài viết thuộc www.vozshare.com