仅使用 css 自动放大缩小 img
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41907250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom-in Zoom-out img automatically using css only
提问by micronyks
I have a working demo. just hover the img and there is the effect I want to have.
我有一个工作演示。只需将 img 悬停，就有我想要的效果。
http://jsfiddle.net/jxgjhzer/1/
http://jsfiddle.net/jxgjhzer/1/
As you can see in css file, I don't use any css animation.
正如您在 css 文件中看到的，我没有使用任何 css animation。
Just using CSS transform, I want my img to achieve same effect without hovering it. It should happen automatically.
仅使用 CSS transform，我希望我的 img 无需悬停即可达到相同的效果。它应该自动发生。
So how to zoom-in and zoom-out automatically (without animation if possible)?
那么如何自动放大和缩小（如果可能，没有动画）？
Code goes here:
代码在这里：
.galleryImg{
height:150px;
width:100%;
transform-origin: 50% 50%;
transition: transform 30s linear;
}
.galleryImg:hover{
transform: scale(2) rotate(0.1deg);
}
回答by DolDurma
that's very simple. you can see DEMO on this linkon jsfiddle.net
这很简单。您可以在 jsfiddle.net上的此链接上看到 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 ;
}
回答by Hemant
use animation
使用动画
.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);
}
}
回答by M. Lak
The below css code will help you out for zoom out effect on hover the particular image. Try this code its very useful to you
下面的 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;
}
Refer the html code here.
请参阅此处的 html 代码。
<div class="hover04 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
Check out the Demo here
