Animated images

rafverjim · Member · Feb 12, 2014 at 4:27 pm
Copy link

Add topic to favorites
Hi there!

I would like to know if there is any option of doing an animation effect in the images, something similar to what they did in this website:

http://www.disneyanimation.com/projects

Thanks a lot,

Rafa

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 13, 2014 at 9:17 pm
Copy link
Hi Rafa, I took a look at the site and This can be done with CSS in pages and posts quite easily. What you need to do is to wrap the image code in the post or page in a div with a class declaration. This is a sample of the image code and div.
```
<div class="img-shift">INSERTED_IMAGE_CODE_HERE</div>
```
Next, add the following CSS.
```
.img-shift {
    height: 65px;
    overflow: hidden;
}
.img-shift img {
    margin-top: 0;
    transition: margin-top 1s;
    -webkit-transition: margin-top 1s;
}
.img-shift img:hover {
    margin-top: -10px;
    transition: margin-top 1s;
    -webkit-transition: margin-top 1s;
}
```
This is a specific example matched to the height of the image I used for testing (75px). I set the height of the div at 10px less (65px) and set overflow to hidden to hide the 10px bit of the image. I created a rule for the img (second rule above) that sets the top margin to 0 and sets a transition for top margin to 1 second (you can make it whatever you wish). I then created the third rule which says to shift the image up 10px (-10px top margin) when the mouse is hovered over the image and again I used a 1 second transition.

You will have to modify the above for your images, and this would work best for images that were all the same height as it is a specific solution.

If you needed additional heights, you can make new rules for those heights and assign different class names to them, such as img-shift-2 or something like that.
rafverjim · Member · Feb 14, 2014 at 8:17 am
Copy link
Oh, thanks a lot thesacredpath!! It worked perfectly!!

No items found.