Hiệu ứng thay đổi ảnh khi dê chuột vào

Hôm nay Namkna sẽ giới thiệu cho các bạn một hiệu ứng phóng ảnh hoàn toàn mới. Khi bạn dê chuột vào ảnh. Nếu các bạn còn nhớ thì mình đã từng giới thiệu cho các bạn

Hôm nay mình giới thiệu Cách tạo hiệu ứng bóng mờ khi de chuột với CSS.
Các bạn cso thể xem Demo:

Xem Demo

Cách 1: Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:
Tiếp theo vào  Thiết kế  ->  Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style>

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute; /* absolute position and stack images inside container */
  left: 0;
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
  opacity: 0;
  visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
  z-index: 1; /* set base z-index of initially shown image */
}


@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
  0%{ /* Start of animation */
  z-index: -1;
  opacity: 0;
  }
  50%{ /* Half way point, move image to right edge of container */
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{ /* 51% point, stack animating image on top of original image */
  z-index: 2;
  }
  100%{ /* Final point, move animating image back so it's on top of original */
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
  -webkit-animation-name:revealfromright; /* specify animation keyframe */
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
  
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
  
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
  
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
  opacity:0.5;
}

</style>

- Bước 2: Thêm đoạn Code sau vào HTML/JavarScrip hặc HTML bài viết

<!--dimensions of each container should be set to original image's dimensions -->

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="Ảnh 1" />
<img class="ondemand" src="Ảnh hiện ra khi dê chuột vào ảnh 1" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="Ảnh 2" />
<img class="ondemand" src="Ảnh hiện ra khi rê chuột vào ảnh 2" />
</div>

Cách 2: Cách này hơi khác cách 1 đó là các bạn chèn trực tiếp mã sau vào bài viết của bạn.

Xem Demo

<a href="http://namkna.blogspot.com/" onmouseover="nameyourimage.src='Link ảnh 1'" onmouseout="nameyourimage.src='Link ảnh 2'"><img src="Link ảnh 2" name="nameyourimage" border="0" /></a>
Ta sử dụng 2 ảnh trùng nhau là link ảnh 2
Chúc thành công!

theo: dynamicdrive.