图像在悬停时不会缩放，使用:after不起作用。

huangapple
go评论105阅读模式
英文:

Image zoom on hover not working with :after

问题

我只想为我的图像添加一个缩放效果和透明覆盖层，我尝试了这种方式，但只有覆盖层有效。图像缩放效果不起作用。我该如何修复这个问题？

  1. .image-box img {
  2.   position: relative;
  3.   transition: all 500ms ease;
  4. }
  6. .image-box {
  7.   overflow: hidden;
  8. }
  10. .image-box img:hover {
  11.   transform:scale(1.1); 
  12. }
  14. .image-box:after {
  15.   content: '\A';
  16.   position: absolute;
  17.   width: 100%;
  18.   height: 100%;
  19.   top: 0;
  20.   left: 0;
  21.   z-index: 2;
  22.   background: rgba(0, 0, 0, 0.4);
  23.   opacity: 0;
  24.   transition: all 500ms ease;
  25. }
  27. .image-box:hover:after {
  28.   opacity: 1;
  29. }
  1. <div class="inner-box">
  2.   <figure class="image-box">
  3.     <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  4.   </figure>
  5. </div>
英文:

I just want to add a zoom effect and transparent overlay into my image, I tried this way but working only the overlay. Image zoom effect isn't working. How can I fix this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.image-box img {
position: relative;
transition: all 500ms ease;
}

.image-box {
overflow: hidden;
}

.image-box img:hover {
transform:scale(1.1);
}

.image-box:after {
content: '\A';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 500ms ease;
}

.image-box:hover:after {
opacity: 1;
}

<!-- language: lang-html -->

  1. &lt;div class=&quot;inner-box&quot;&gt;
  2.   &lt;figure class=&quot;image-box&quot;&gt;
  3.     &lt;img width=&quot;480&quot; height=&quot;480&quot; src=&quot;https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg&quot;&gt;
  4.   &lt;/figure&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 3

The overlay itself prevents the hover event from propagating to the img.
一个解决方法是不在img上使用:hover，而是在image-box上悬停时放大img。

  1. .image-box img{
  2.     position: relative;
  3.     transition: all 500ms ease;
  4. }
  6. .image-box{
  7.     overflow: hidden;
  8. }
  10. .image-box:hover img{       /* changed */
  11.     transform:scale(1.1); 
  12. }
  14.  .image-box:after{
  15.     content:'\A';
  16.     position:absolute;
  17.     width:100%;
  18.     height:100%;
  19.     top:0;
  20.     left:0;
  21.      z-index: 2;
  22.     background: rgba(0, 0, 0, 0.4);
  23.     opacity:0;
  24.     transition: all 500ms ease;
  25. }
  27.  .image-box:hover:after{
  28.     opacity:1;
  29. }
  1. <div class="inner-box">
  2.   <figure class="image-box">
  3.     <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  4.   </figure>
  5. </div>
英文:

The overlay itself prevents the hover event from propagating to the img.
One solution is to not use :hover on the img, but to grow the img on hovering the image-box.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1. .image-box img{
  2. 	position: relative;
  3. 	transition: all 500ms ease;
  4. }
  6. .image-box{
  7. 	overflow: hidden;
  8. }
  10. .image-box:hover img{       /* changed */
  11. 	transform:scale(1.1); 
  12. }
  14.  .image-box:after{
  15.     content:&#39;\A&#39;;
  16.     position:absolute;
  17.     width:100%;
  18. 	height:100%;
  19.     top:0;
  20. 	left:0;
  21. 	 z-index: 2;
  22.     background: rgba(0, 0, 0, 0.4);
  23.     opacity:0;
  24.     transition: all 500ms ease;
  25. }
  27.  .image-box:hover:after{
  28.     opacity:1;
  29. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;inner-box&quot;&gt;
  2.   &lt;figure class=&quot;image-box&quot;&gt;
  3.     &lt;img width=&quot;480&quot; height=&quot;480&quot; src=&quot;https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg&quot;&gt;
  4.   &lt;/figure&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 2

只需添加以下类：

  1. .image-box:hover img{
  2.     transform:scale(1.1);
  3.     transition: all 500ms ease;
  4. }
  1. .image-box img{
  2.     position: relative;
  3.     transition: all 500ms ease;
  4. }
  5. .image-box{
  6.     overflow: hidden;
  7. }
  8. .image-box img:hover{
  9.     transform:scale(1.1);
  10. }
  11. .image-box:after{
  12.     content: '\A';
  13.     position:absolute;
  14.     width:100%;
  15.     height:100%;
  16.     top:0;
  17.     left:0;
  18.     z-index: 2;
  19.     background: rgba(0, 0, 0, 0.4);
  20.     opacity:0;
  21.     transition: all 500ms ease;
  22. }
  23. .image-box:hover:after{
  24.     opacity:1;
  25. }
  26. .image-box:hover img{
  27.     transform:scale(1.1);
  28.     transition: all 500ms ease;
  29. }
  1. <div class="inner-box">
  2.     <figure class="image-box">
  3.         <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  4.     </figure>
  5. </div>
英文:

Just add the following class:

  1. .image-box:hover img{
  2.     transform:scale(1.1);
  3.     transition: all 500ms ease;
  4. }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .image-box img{
  2.     position: relative;
  3.     transition: all 500ms ease;
  4. }
  5. .image-box{
  6.     overflow: hidden;
  7. }
  8. .image-box img:hover{
  9.     transform:scale(1.1);
  10. }
  11. .image-box:after{
  12.     content:&#39;\A&#39;;
  13.     position:absolute;
  14.     width:100%;
  15.     height:100%;
  16.     top:0;
  17.     left:0;
  18.     z-index: 2;
  19.     background: rgba(0, 0, 0, 0.4);
  20.     opacity:0;
  21.     transition: all 500ms ease;
  22. }
  23. .image-box:hover:after{
  24.     opacity:1;
  25. }
  26. .image-box:hover img{
  27.     transform:scale(1.1);
  28.     transition: all 500ms ease;
  29. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;inner-box&quot;&gt;
  2.   &lt;figure class=&quot;image-box&quot;&gt;
  3.     &lt;img width=&quot;480&quot; height=&quot;480&quot; src=&quot;https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg&quot;&gt;
  4.   &lt;/figure&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

我认为你的演示效果很完美，你只需要在.image-box:after中做一个小改动。我已经将z-index更新为-1。

  1. .image-box img {
  2.   position: relative;
  3.   transition: all 500ms ease;
  4. }
  5. .image-box {
  6.   overflow: hidden;
  7. }
  8. .image-box:hover img {
  9.   transform: scale(1.1);
  10. }
  11. .image-box:after {
  12.   content: "";
  13.   position: absolute;
  14.   width: 100%;
  15.   height: 100%;
  16.   top: 0;
  17.   left: 0;
  18.   z-index: -1;
  19.   background: rgba(0, 0, 0, 0.4);
  20.   opacity: 0;
  21.   transition: all 500ms ease;
  22. }
  23. .image-box:hover:after {
  24.   opacity: 1;
  25. }
  1. <div class="inner-box">
  2.   <figure class="image-box">
  3.     <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  4.   </figure>
  5. </div>

希望这有所帮助。

英文:

I think your demo works perfectly you just need a minor change in .image-box:after. I have updated z-index to -1.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .image-box img {
  2.   position: relative;
  3.   transition: all 500ms ease;
  4. }
  5. .image-box {
  6.   overflow: hidden;
  7. }
  8. .image-box:hover img {
  9.   transform: scale(1.1);
  10. }
  11. .image-box:after {
  12.   content: &quot;&quot;;
  13.   position: absolute;
  14.   width: 100%;
  15.   height: 100%;
  16.   top: 0;
  17.   left: 0;
  18.   z-index: -1;
  19.   background: rgba(0, 0, 0, 0.4);
  20.   opacity: 0;
  21.   transition: all 500ms ease;
  22. }
  23. .image-box:hover:after {
  24.   opacity: 1;
  25. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;inner-box&quot;&gt;
  2.   &lt;figure class=&quot;image-box&quot;&gt;
  3.     &lt;img width=&quot;480&quot; height=&quot;480&quot; src=&quot;https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg&quot;&gt;
  4.   &lt;/figure&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

I hope this helps.

huangapple
  • 本文由 发表于 2020年1月6日 14:55:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/59607887.html
  • css
  • css-transitions
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定