CODEWITHSUNDEEP
css
micronyks
micronyks

Reputation: 55443

Zoom-in Zoom-out img automatically using css only

I have a working demo. just hover the img and there is the effect I want to have.

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

As you can see in css file, I don't use any css animation.

Just using CSS transform, I want my img to achieve same effect without hovering it. It should happen automatically.

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

Upvotes: 6

Views: 75420

Answers (3)

M. Lak
M. Lak

Reputation: 911

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

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.

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

Upvotes: -2

DolDurma
DolDurma

Reputation: 17321

that's very simple. you can see DEMO on this link on 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 ;
}

Upvotes: 29

Anonymous
Anonymous

Reputation: 1990

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

  }

}

Upvotes: 4

Related Questions