Trước hết mình sẽ nói qua ý tưởng của việc tạo hiệu ứng này. Hiệu ứng xảy ra khi người dùng hover vào colum, background của colum sẽ được thay đổi. Thông thường như ở css 2 khi hiệu hover thì lập tức background được thay đổi. Nếu như khoảng thời gian 4-5 năm trước thì khi nhìn thấy điều đó bạn đã cảm thấy khá ấn tượng. Nhưng hiện giờ khi jquery xuất hiện, đã xem rất nhiều hiệu ứng của jquery thì bạn sẽ cảm thấy nó rất thô cứng. Với 2 thuộc tính mới của css 3 đó là background và transition chúng ta có thể làm điều đó đơn giản hơn với việc dùng jquery. Tại sao chúng ta lại sử dụng 2 thuộc tính này?

• Background: Như các bạn thấy trong hiệu ứng này sẽ có 2 bức ảnh từ 2 bên từ từ vào giữa, CSS 3 đã cung cấp cho một Element(đối tượng) có thể có nhiều background.
• Transition(sự chuyển tiếp): chúng ta sử dụng transition khi một element có sự thay đổi về giá trị giữa 2 trạng thái. Trong hiệu ứng này, background-poistion đã có sự thay đổi khi chúng ta hover qua colum.

Ý tưởng là vậy, chúng ta bắt đầu làm nào:

Trước hết là mã HTML:

  
<div class="page">
  <div id="colum1" class="colum">    
    <h2>Starting Up</h2> 
    <p>Vestibulum quis felis ut enim aliquam iaculis. Nullam pharetra tortor at quam viverra volutpat</p>
    <a href="#">More</a>
  </div>

  <div id="colum2" class="colum">    
    <h2>Planning</h2> 
    <p>Nullam eget felis id metus luctus semper quis vel nulla. Cras diam mauris, molestie eu sodales non,</p>
    <a href="#">More</a>
  </div>
  
  <div id="colum3" class="colum">    
    <h2>Development</h2> 
    <p>Nulla at tortor quam, eu ultricies nulla. Maecenas viverra, leo vitae mattis iaculis, nisi nunc semp</p>
    <a href="#">More</a>
  </div>
</div>

Mã CSS cho phần hiển thị.

.colum{
  float: left;
  width: 313px; 
}
.colum p{
  background: url(../images/block-service-body.png) no-repeat center top;
  padding: 26px 35px 23px;
  text-align: center;
  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
}
.colum a{
  display: inline-block;
  padding: 8px 20px 7px;
  color: white;
  background: url(../images/bg-more.png) top repeat-x;
  border-radius: 5px;
  text-decoration: none;
  margin-left: 125px;
}
.colum a:hover{
  background: url(../images/bg-more.png) bottom repeat-x #E4AA07;
  text-decoration: none;
}

Giờ bắt đầu với thuộc tính background :

Bình thường:

.colum{
background: url(../images/bg-block-serv.gif) repeat-y right, url(../images/hover-left.png) -160px repeat-y, url(../images/hover-right.png) 320px repeat-y;
}

Khi hover qua:

.colum:hover{
  background: url(../images/bg-block-serv.gif) repeat-y right, url(../images/hover-left.png) left repeat-y, url(../images/hover-right.png) 156px repeat-y;
}

Cũng gần giống như CSS 2, nhưng ở CSS 3 có thêm một điều đó là Chúng ta có thể có nhiều background trong một đối tượng. Bằng với việc kết hợp background-poisiton thì một đối tượng sẽ có một background được ghép từ nhiều miếng nhỏ. Và đó cũng là ý tưởng được dùng cho hiệu ứng này. Trong thẻ colum gồm 3 background:

Các bạn hãy thử thay đổi các giá trị -160px, 320px,left, 156px để xem tác dụng của nó là gì?

Tiếp theo chúng ta sẽ sử dụng transition để hoàn thành hiệu ứng này:

transition: property duration timing-function delay;

• transition-property: thuộc tính css áp dụng transition. Ở đây chúng ta sẽ sử dụng "background-postion"
• transition-duration: khoảng thời gian xảy ra transition. Mặc định 0.Ở đây là 0.4s.
• transition-timing-function: Tốc độ transition xảy ra như thế nào. Mặc định ease.Bạn có thể thử với giá trị khác như: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).
• transition-delay: độ trễ sẽ thực hiện transiton. Defaul 0.

.colum{
  -webkit-transition: background-position .4s ease;//cần thêm tiền tố -webkit- để chạy được trong Chomre, Safari
-moz-transition: background-position .4s ease;//cần thêm tiền tố -webkit- để chạy được trong Firefox
-o-transition:background-position .4s ease;//cần thêm tiền tố -webkit- để chạy được trong Opera.
}

Vậy transition đã làm gì trong hiệu ứng này. Bình thường khi bạn không di chuột qua các colum, thì trong colum chúng ta chỉ nhìn thấy duy nhất background bg-block-serv.gif. Nhưng khi bạn hover qua bạn thấy sự chuyển động của background:

• hover-left: chuyển từ position -160px tới vị trí 0px (Vị trí tương đối so với colum). Việc dịch chuyển này diễn ra trong vòng 0.4s. Bạn thử đổi giá trị transition-duration về 0 xem nhé!
• hover-right:Chuyển từ position 320px tới position 156px.
• Bạn cũng có thể thêm transition-delay để biết thêm về thuộc tính này.

Chính những điều này do CSS 3 Transition thực hiện.

Như vậy chúng ta đã hoàn thành hiệu ứng với 2 thuộc tính của CSS3.Bạn đã tìm được chỗ để đặt nó trong trang web của mình chưa? Cuối cùng mình muốn có câu hỏi cho mọi người, nếu như các bạn không sử dụng CSS3, hoặc bạn muốn hiệu ứng ấy chạy được trên IE thì sao? Chúng ta phải làm thế nào đây. Bạn nào biết điều này hãy giúp mình cùng với mọi người nhé!