Question

我有一个工作演示。只是悬停img，我想要有效果。

正如您在css文件中看到的，我没有使用任何css animation 。

只需使用CSS transform ，我希望我的img在不悬停的情况下实现相同的效果。它应该自动发生。

那么如何自动放大和缩小（如果可能的话没有动画）？

代码在这里：

.galleryImg{
    height:150px;
    width:100%;
    transform-origin: 50% 50%;
    transition: transform 30s linear;
 }

 .galleryImg:hover{    
    transform: scale(2) rotate(0.1deg);
 }

Answer 1

这非常简单。你可以在jsfiddle.net上的this link看到DEMO

<div class="cardcontainer">
  <img class="galleryImg" src="https://www.google.com/logos/doodles/2014/2014-winter-olympics-5710368030588928-hp.jpg">
</div>

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

.cardcontainer img {
    animation: zoominoutsinglefeatured 1s infinite ;
}

Answer 2

使用动画

.galleryImg{
    height:150px;
    width:100%;
     animation:move 3s infinite ease-in-out;
 }

@keyframes move{
0%{
 transform: scale(1) rotate(0deg);
}
  100%{
   transform: scale(2) rotate(0.1deg);

  }

}

Answer 3

以下css代码可帮助您在悬停特定图像时缩小效果。试试这个对你非常有用的代码

figure {
 width: 300px;
 height: 200px;
 margin: 0;
 padding: 0;
 background: #fff;
 overflow: hidden;
}
figure:hover+span {
 bottom: -36px;
 opacity: 1;
}

.hover04 figure img {
 width: 400px;
 height: auto;
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
}
.hover04 figure:hover img {
 width: 300px;
}

请参阅此处的html代码。

<div class="hover04 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>

查看Demo here

放大仅使用css自动缩小img

3 个答案: