Zoom Effect on Image Hover with CSS

HTML for images with zoom hover effect

Applying a zoom effect is easily done by applying a scale transform using CSS, however in order to ensure that when zoom happens, the images retain their original size, that is any extra height & width gets clipped, we are going to wrap our images into few containers as shown below.
<div class="zoom-effect-container">
  <div class="image-card">
      <img src="https://superdevresources.com/wp-content/uploads/2014/12/lions.jpg"/>
  </div>
</div>
<div class="zoom-effect-container">
  <div class="image-card">
      <img src="http://codingtips.kanishkkunal.in/images/pixabay/peacock.jpg"/>
  </div>
</div>
As we can see, I have wrapped the images on which I want to apply zoom effect into wrapper classes called zoom-effect-container and image-card. Next we will define CSS styles for these wrapper classes as well as for the image contained in them.

CSS for images with zoom hover effect

For the parent container class zoom-effect-container, we are going to define the size we want it to retain while displaying and zooming the images within it. This generally would be same as the size of images. For my case it is 640px X 360px. We also define overflow: hidden for this parent container, this is crucial if you want to clip the image to its original height & width when zoom effect is applied.
.zoom-effect-container {
    float: left;
    position: relative;
    width: 640px;
    height: 360px;
    margin: 0 auto;
    overflow: hidden;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
The inner wrappaer class called image-card is used to absolutely position our image inside the parent container. Next we have defined a transition duration of 0.4s for the zoom animation to play.

The actual zoom effect is being applied on the CSS :hover selector of parent container, and we have used a scale transform which is going to zoom the image to increase its size by 8%.

Nguồn bài viết: superdevresources.com

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Liên kết
Remitano
Regalcoin1
Kiếm tiền cùng chuyên gia Trader coin
Omnia-Tech
CoinExchange.io

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây