最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can i make image scale on hover inside the container? - Stack Overflow

programmeradmin2浏览0评论

I want the image to scale but not the container.

    <div class="container">
     <img class="img" src="" />
   </div>

I want the image to scale but not the container.

    <div class="container">
     <img class="img" src="" />
   </div>
Share Improve this question asked Sep 27, 2021 at 6:48 Shahir RiazShahir Riaz 871 gold badge1 silver badge9 bronze badges 1
  • on img give hover img:hover { transform: scale(1.1); } give transition to for smoothness. Try and let me know. I will put it up as answer then as well. – Wahab Shah Commented Sep 27, 2021 at 6:52
Add a ment  | 

1 Answer 1

Reset to default 5

Add max-width for the container and set transform:scale for the image when hovering and set overflow:hidden for the container so that the scaled image won't go out of the container . Also add transition for cool effects.

.container {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  z-index: 1;
}
.container::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #e5e5e5;
  opacity: 0;
  transition: .5s ease all;
}
img {transition: .5s ease all; width: 100%; object-fit:cover;}
.container:hover img {
  transform: scale(1.1);
}

.container:hover::after {opacity: 0.2;}
 <div class="container">
     <img class="img" src="https://picsum.photos/id/237/200/300" />
   </div>

Add pseudo element like ::before or ::after for the ovelay effect and display its visibility on hovering

发布评论

评论列表(0)

  1. 暂无评论