在 css 悬停效果上，无法选择/应用效果到特定元素？

Question

I have an image with a div overlay.我有一个带有 div 叠加层的图像。 The div overlay appears on hover. div 覆盖出现在悬停时。 ALSO on the hover, I want an animation effect.同样在悬停时，我想要一个动画效果。 The problem is, the animation effect happens on the image AND the overlay, but I do not want the animation effect to occur on the overlay.问题是，动画效果发生在图像和叠加层上，但我不希望动画效果发生在叠加层上。

This code works, but I'm not able to prevent the animation from occurring on the overlay.此代码有效，但我无法阻止动画在叠加层上发生。 What css code will make the animation effect happen ONLY on the image?什么css代码会使动画效果只发生在图像上？

So in the code below, the css is working on the container-image, but it is also happening on the extra-layer .所以在下面的代码中，css 正在处理 container-image，但它也在 extra-layer 上发生。 How to make this ONLY work on the container-image?如何使其仅适用于容器映像？

html html

    <special class=“container”>
    <a href=“#" class=“container-link”>
    <img  src=“image.jpg" class=“container-image”> 
    <div class=“extra-layer”></div>
    </a>
    </special>

css css

   #container {
        position: relative;
   }

    .container ::before {
        position: absolute;
        -webkit-transform: translate(-60%, -60%);
        transform: translate(-60%, -60%);
        opacity: .5;
    }

     .container :hover::before {
           -webkit-animation: circle .55s;
            animation: circle .55s;
     }

Answer 1

your code does not worked.你的代码不起作用。 i tested it through JSFiddle.我通过 JSFiddle 对其进行了测试。 I think what you want is something like this我想你想要的是这样的

you can refer here for further information 你可以参考这里了解更多信息

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>

</body>
</html>

Answer 2

The code i edited to show only the center circle is here.我编辑的仅显示中心圆的代码在这里。 you can check it when you hover upon the image.当您将鼠标悬停在图像上时，您可以检查它。 the title and name.标题和名称。

HTML is same as yours. HTML 与您的相同。 CSS is CSS 是

@import "compass/css3";
@import "compass";
@import "compass/reset";
@import "compass/css3";
body {
color: white;
font-family: 'helvetica-nue', helvetica, arial, sans-serif;
}
.gallery {
margin: 0 auto;
text-align: center;
width: 100%;
padding: 20px;
}
.gallery li {
width: 421px;
min-height: 100%;
text-align: center;
height: 255px;
position: relative;
margin: 0 auto;
display: inline-block;
overflow: hidden;
background-color: black;
}
.gallery li:nth-child(2) img {
margin: 0;
display: inline-block;
float: right;
}
.name {
transition-property:all;
transition-duration:.6s;
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: lighter;
font-size: 20px;
letter-spacing: 0.1em;
position: absolute;
height:auto;
float:left;
width: 100%;
display: block;
top: 40%;
left: 0;
text-align: center;
z-index: 2;
}
.gallery li .name .title {
display: block;
text-transform: none;
font-style: italic;
font-size: 80%;
color: rgba(255, 255, 255, .7);
transition-property: all;
transition-delay:.2s;
transition-duration:.9s;
}
.gallery li:hover img {
background-position: top top;
}
.gallery li img {
display: block;
width: 421px;
margin: 0 auto;
display: inline-block;
text-align: center;
}
#gallery {
position: relative;
}
.gallery ::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
display: block;
content: '';
width: 0;
height: 0;
background: orange;
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 1;
}
.gallery li:hover::before {
-webkit-animation: circle 0.95s;
animation: circle 0.95s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}

Here is the code Link .这是代码链接。 You might encounter that the transition effects of text has gone.您可能会遇到文本的过渡效果没有了。 but that can be resumed.但这可以恢复。 check out the functionality.检查功能。

Thanks谢谢

Answer 3

You use the code below.您使用下面的代码。 Run the snippet to see the result:运行代码片段以查看结果：

 .container-link{ position: relative; display: block; width: 128px; height: 128px; } .extra-layer{ position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; } .container-link:hover img{ animation: circle 0.55s; } @keyframes circle{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

 <div class="container"> <a href='#' class="container-link"> <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" class="container-image" /> <div class="extra-layer"></div> </a> </div>

在 css 悬停效果上，无法选择/应用效果到特定元素？

问题描述

3 个解决方案

解决方案1
0 2019-12-20 06:36:13

解决方案2
0 2019-12-23 05:20:04

解决方案3
0 2019-12-23 05:34:05

在 css 悬停效果上，无法选择/应用效果到特定元素？

问题描述

3 个解决方案

解决方案1 0 2019-12-20 06:36:13

解决方案2 0 2019-12-23 05:20:04

解决方案3 0 2019-12-23 05:34:05

解决方案1
0 2019-12-20 06:36:13

解决方案2
0 2019-12-23 05:20:04

解决方案3
0 2019-12-23 05:34:05