2020年1月6日 14:55:47go评论83阅读模式

英文:

Image zoom on hover not working with :after

问题

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

.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;
}

<div class="inner-box">
  <figure class="image-box">
    <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  </figure>
</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?

.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;
}

&lt;div class=&quot;inner-box&quot;&gt;
  &lt;figure class=&quot;image-box&quot;&gt;
    &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;
  &lt;/figure&gt;
&lt;/div&gt;

答案1

得分: 3

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

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

.image-box{
    overflow: hidden;
}

.image-box:hover img{       /* changed */
    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;
}

<div class="inner-box">
  <figure class="image-box">
    <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  </figure>
</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.

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

.image-box{
	overflow: hidden;
}

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

 .image-box:after{
    content:&#39;\A&#39;;
    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;
}

&lt;div class=&quot;inner-box&quot;&gt;
  &lt;figure class=&quot;image-box&quot;&gt;
    &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;
  &lt;/figure&gt;
&lt;/div&gt;

答案2

得分: 2

只需添加以下类：

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

.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;
}
.image-box:hover img{
    transform:scale(1.1);
    transition: all 500ms ease;
}

<div class="inner-box">
    <figure class="image-box">
        <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
    </figure>
</div>

英文:

Just add the following class:

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

.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:&#39;\A&#39;;
    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;
}
.image-box:hover img{
    transform:scale(1.1);
    transition: all 500ms ease;
}

&lt;div class=&quot;inner-box&quot;&gt;
  &lt;figure class=&quot;image-box&quot;&gt;
    &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;
  &lt;/figure&gt;
&lt;/div&gt;

答案3

得分: 0

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

.image-box img {
  position: relative;
  transition: all 500ms ease;
}
.image-box {
  overflow: hidden;
}
.image-box:hover img {
  transform: scale(1.1);
}
.image-box:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 500ms ease;
}
.image-box:hover:after {
  opacity: 1;
}

<div class="inner-box">
  <figure class="image-box">
    <img width="480" height="480" src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg">
  </figure>
</div>

希望这有所帮助。

英文:

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

.image-box img {
  position: relative;
  transition: all 500ms ease;
}
.image-box {
  overflow: hidden;
}
.image-box:hover img {
  transform: scale(1.1);
}
.image-box:after {
  content: &quot;&quot;;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: all 500ms ease;
}
.image-box:hover:after {
  opacity: 1;
}

&lt;div class=&quot;inner-box&quot;&gt;
  &lt;figure class=&quot;image-box&quot;&gt;
    &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;
  &lt;/figure&gt;
&lt;/div&gt;

I hope this helps.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

Can a JS Path be customized to execute a click on a element (checkbox) SELENIUM, Java

使用jQuery在第一个下拉菜单中选择后，启用第二个下拉菜单中的数据。

用CSS替换WooCommerce登录页面的文本。

同一边框是否可以着不同区域的色彩？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论