我有一个带div覆盖的图像。 div叠加层显示在悬停上。在悬停上，我还想要动画效果。问题是，动画效果发生在图像和叠加层上，但我不希望动画效果出现在叠加层上。
此代码有效，但是我无法防止动画在叠加层上发生。什么CSS代码将使动画效果仅在图像上发生？
因此，在下面的代码中，css正在处理容器图像，但是它也在附加层上发生。如何仅对容器图像起作用？
html
<special class=“container”>
<a href=“#" class=“container-link”>
<img src=“image.jpg" class=“container-image”>
<div class=“extra-layer”></div>
</a>
</special>
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;
}
您的代码无效。我通过JSFiddle对其进行了测试。我认为您想要的是这样的东西
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>
我编辑为仅显示中心圆的代码在这里。当您将鼠标悬停在图片上时，可以对其进行检查。标题和名称。
HTML与您的相同。 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。您可能会遇到文本的过渡效果已经消失的情况。但是可以恢复。查看功能。
谢谢
您使用下面的代码。运行代码片段以查看结果：
.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>