仅使用CSS自动缩放图片的Zoom-in Zoom-out效果

Question

我有一个可用的演示。只需将鼠标悬停在图像上，就会出现我想要的效果。

http://jsfiddle.net/jxgjhzer/1/

正如您在CSS文件中所看到的，我没有使用任何CSSanimation。

只是使用CSStransform，我希望我的图片能够在不悬停的情况下实现相同的效果。它应该自动发生。

那么如何自动缩放（如果可能的话，不使用动画）？

代码如下：

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

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

- micronyks

---

你是指没有动画效果吗？ - kojow7

Answer 1

很简单，您可以在此链接上的jsfiddle.net上查看演示。

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

- DolDurma

---

这正是我所需要的。非常感谢 @DolDurma :) - Ayushi Varshney

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);

  }

}

- Hemant

---

我想实现它，但不需要动画。 - micronyks

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>

- M. Lak