Question

我的网页上有一张图片，当我将其悬停时，我想隐藏它并显示带有文字的背景。

我有类似的东西：

<div class="col-md-15 col-lg-15 col-sm-4 col-xs-12 gridImage">
        <img src="images/bonheur.jpg" class="img-responsive gridImage" id="">
</div>

我尝试使用JQuery，但我没有成功。（.hover）

我正在尝试使用css3，但我的问题是：当动画结束时，图像会再次出现。

我的代码是：

.gridImage>img:hover
{
    animation : test 1s infinite;
}



@keyframes test {
    0% {opacity : 0.9}
    20% {opacity : 0.8}
    40% {opacity : 0.6}
    50% {opacity : 0.5}
    60% {opacity:0.4}
    80% {opacity : 0.2}
    90% {opacity : 0}
    100% {opacity : 0}
}

你能告诉我出了什么问题吗？

Answer 1

如果你想在悬停时完全隐藏图像，我不明白你为什么要使用动画。使用不透明度：0过渡，您将获得干净的效果。

我绝对在中间放置了一个文本，在z-index的帮助下隐藏在正常情况下

这是代码。

.gridImage>img:hover
{
    opacity: 0;
    transition: 2s all ease;
}
.gridImage{
  position: relative;
  width: 500px;
  height: 500p; 
}
.gridImage img{
  width: 100%;
  z-index: 2
}
.gridImage:hover{
  background: #333;
  transition: 1s all ease;
}
.gridImage h1{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%,-50%);
  z-index: 1;
  color: #fff;
}

<div class="col-md-15 col-lg-15 col-sm-4 col-xs-12 gridImage">
  <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" class="img-responsive gridImage" id="">
  <h1>
        This is an image
        </h1>
</div>

我希望这有帮助：）

Answer 2

如果你想在鼠标悬停动画时将不透明度变为0，你应该在动画中放置属性以避免返回不透明度1并将animation-iteration-count设置为1而不是无限animation : test 1s forwards 1 ; 这就是代码：

＆＃13;

.gridImage {
    width:400px;
    height:300px;
}

.gridImage > img:hover {
    animation : test 1s forwards 1 ;
    z-index:9999
}

.gridImage > H1 {
    position:absolute;
    top:100px;
    left:180px;
    visibility:hidden;
    transition-delay:0s;
}

.gridImage:hover H1 {
    visibility: visible;
    transition-delay:1s
}

@keyframes test {
    0% {opacity : 0.9}
    20% {opacity : 0.8}
    40% {opacity : 0.6}
    50% {opacity : 0.5}
    60% {opacity:0.4}
    80% {opacity : 0.2}
    90% {opacity : 0}
    100% {opacity : 0}
}

＆＃13;

<div class="col-md-15 col-lg-15 col-sm-4 col-xs-12 gridImage">
        <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" class="img-responsive gridImage" id="">
  <H1>This is test</H1>
</div>

＆＃13;

希望这会有所帮助。

在动画（css3）之后，图像不会完全消失

2 个答案: