Ấn tượng với hiệu ứng hover ảnh bằng CSS3 hoặc jQuery

Thông thường, để xây dựng ứng dụng ảnh gallery trên website , chúng ta thường áp dụng cách cơ bản là tạo những ảnh thumnail nhỏ. Và khi click vào chúng, thì sẽ xuất hiện những ảnh lớn hơn dưới dạng pop up (sử dụng những scirpt như Fancybox). Sẽ là một ý tưởng hay hơn nếu chúng ta áp dụng thêm hiệu ứng khi rê chuột vào ảnh, vì như vậy sẽ làm trang web của chúng ta thân thiện hơn với người dùng.

Trong bài viết này , mình sẽ  chia sẻ cho các bạn 1 cách đơn giản để làm hiệu ứng hover cho ảnh. Với hiệu ứng này, khi người dùng rê chuột vào ảnh thumnail, thì sẽ xuất hiện một hình nền màu đen với độ trong suốt vừa phải, nằm đè trên ảnh gốc. Đồng thời cũng sẽ xuất hiện biểu tượng kính lúp, ngầm ý cho người dùng biết là khi click vào, sẽ có ảnh lớn của nó. Chúng ta cũng có thể tạo hiệu ứng này bằng 2 cách : Bằng jQuery và CSS3.

Xem Demo | Download

Đầu tiên chúng ta sẽ cần định dạng HTML như sau để tạo hiệu ứng , với định dạng này, chúng ta có thể áp dụng cho cả 2 cách.

<a class="image"  href="#">
	<span class="roll" ></span>
	<img class="imgborder" alt="" src="images/pic.jpg">
</a>

Cách 1 : jQuery

Với cách này, chúng ta sẽ cần có đoạn CSS sau :

span.roll {
	background:url(images/mag.png) center center no-repeat #000;
	height: 346px;
	position: absolute;
	awidth: 347px;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000;
}

Và sau đó là chèn đoạn code jQuery bên dưới vào :

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});

Cách 2 : CSS3
Với sự hỗ trợ ngày càng tăng của các trình duyệt phổ biến hiện nay, thì các bạn cũng có thể hoàn toàn yên tâm khi sử dụng cách này.
Các bạn chỉ cần copy toàn bộ đoạn css bên dưới và áp dụng là xong :

span.roll {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 346px;
	awidth: 347px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.roll:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

Mình mong là với 2 cách mà mình giới thiệu ở bên trên, sẽ giúp các bạn có thêm sự lựa chọn cho website hay blog của mình. Đừng ngần ngại để lại câu hỏi nếu bạn thắc mắc điều gì trong bài viết này nhé.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster