Tạo hiệu ứng Hover tuyệt vời cho ảnh với Webkit và CSS3

WebKit là một khung ứng dụng nguồn mở cung cấp các thành phần cần thiết để xây dựng một trình duyệt web. Cùng với CSS3, cả hai đã góp phần tạo ra những hiệu ứng rất đẹp mắt mà trước đây chỉ có thể thực hiện bằng JavaScript hay JQuery.

Trong bài viết này mình sẽ giới thiệu tới các bạn một ứng dụng từ Webkit và CSS3 đó là tạo hiệu ứng hover cho ảnh với nhiều lựa chọn khác nhau. Tuy nhiên có một nhược điểm là chỉ có Google Chrome và Safari 4 mới hỗ trợ hiệu ứng này. Vì thế để có thể xem demo bài viết hoàn chỉnh nhất, các bạn nên mở ở trình duyệt Chrome hoặc Safari. Các bạn có thể xem demo tại đây.

Nào chúng ta cùng bắt đầu tìm hiểu từng hiệu ứng mà cả 2 mang lại.

Hiệu ứng ảnh tự thu nhỏ lại
Trong hiệu ứng này, hình ảnh sẽ tự thu nhỏ khi bạn rê chuột vào hình. Nó được thực hiện bởi thuộc tính -webkit-transform:scale(value)
Phần HTML

<div id="demo-1">
<img src="optimusprime.jpg"/>
</div>

Phần CSS

#demo-1 img {
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-1 img:hover{
-webkit-transform: scale(.5);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Hiệu ứng ảnh mờ dần
Khi bạn rê chuột vào ảnh, ảnh sẽ tự động giảm độ trong suốt xuống còn 50%

Phần HTML

<div id="demo-2">
<img src="optimusprime.jpg"/>
</div>

Phần CSS

#demo-2 img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-2 img:hover{
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Hiển thị thông tin mô tả
Trong hiệu ứng này , khi bạn rê chuột vào ảnh, ản sự tự động bị làm mờ và đồng thời thông tin mô tả sẽ được hiển thị .

Phần HTML

<div id="demo-3">
<img src="optimusprime.jpg"/>
<div>
<h3>Transformers</h3>
<p>More than meets the eye</p>
</div>
</div>

Phần CSS

#demo-3{position:relative;}
#demo-3 img{
opacity:1
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

#demo-3 .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Hiệu ứng Slide Out
Trong hiệu ứng này, ảnh sẽ bị kéo trượt sang phải khi bạn rê chuột và hiển thị thông tin mô tả.

Phần HTML

<div id="demo-4">
<img src="optimusprime.jpg"/>
<div>
<h3>Transformers</h3>
<p>More than meets the eye</p>
</div>
</div>

Phần CSS

#demo-4{position:relative;}
#demo-4 img{
position:absolute;
top:0;
left:0;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-4:hover img{
margin-left:200px;
}
#demo-4 .details{
position:absolute;
top:0;
left:0;
z-index:-1;
}

Hiệu ứng Slide In Box

Thông tin mô tả sẽ được kéo từ trái sang phải khi bạn rê chuột.

Phần HTML

<pre><div id="demo-5">
<img src="optimusprime.jpg"/>
<div>
<h3>Transformers</h3>
<p>More than meets the eye</p>
</div>
</div>

Phần CSS

#demo-5{position:relative;}
#demo-5 .details{
opacity: .9;
position:absolute;
top:0;
left:0;
margin-left:-200px;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-5:hover .details{
margin-left:0;
}

Hiệu ứng Zoom in

Trong hiệu ứng này, thông tin mô tả sẽ được phóng to từ vị trí giữa của ảnh khi bạn rê chuột.

Phần HTML

<div id="demo-5">
<img src="optimusprime.jpg"/>
<div>
<h3>Transformers</h3>
<p>More than meets the eye</p>
</div>
</div>

Phần CSS

#demo-6{
position:relative;
}
#demo-6 img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#demo-6 .details{
opacity: .9;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
#demo-6:hover .details{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}

Những hiệu ứng trên chỉ là một trong số những cái mà Webkit engine có thể làm cho bạn. Một lần nữa mình nhắc các bạn là các hiệu ứng trên chỉ có thể chạy tốt trên trình duyệt Chrome và Safari 4+ ngay tại lúc mình viết bài này. Mình hy vọng là một ngày nào đó , tất cả các trình duyệt phổ biến hiện nay sẽ hỗ trợ tốt cho các hiệu ứng này.

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

Chuyên Mục: Css

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