Zoom-in-Zoom-out-img automatisch mit css nur

Ich habe eine funktionierende demo. halten Sie den Mauszeiger einfach das img und da ist der Effekt, den ich haben will.

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

Wie Sie sehen können in der css-Datei, ich verwende keine css -animation.

Nur mit CSS transform, ich will mein img zu erzielen denselben Effekt, ohne schweben. Es sollte automatisch geschehen.

So, wie zoom-in und zoom-out wird automatisch (ohne animation, wenn möglich)?

Code geht hier:

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

 .galleryImg:hover{    
    transform: scale(2) rotate(0.1deg);
 }
Was meinst du ohne animation?

InformationsquelleAutor micronyks | 2017-01-28

  1. 4

    das ist sehr einfach. sehen Sie DEMO auf dieser link auf 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 ;
}
    wussten Sie testen mein code?

    InformationsquelleAutor DolDurma

  2. 1

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

  }

}
    ohne animation, die ich erreichen möchte.
    ohne animation u nicht erreichen können..

    InformationsquelleAutor noob

  3. -1

    Den untenstehenden css-code wird Ihnen helfen, für die zoom-out-Effekt auf schweben das jeweilige Bild. Versuchen Sie dieses Codes ist es sehr nützlich für Sie

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

    Finden Sie den html-code hier.

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

    Check-out die Demo hier

    InformationsquelleAutor M. Lak

Schreibe einen Kommentar