Title: thumbnail image animation
Last modified: January 15, 2018

---

# thumbnail image animation

 *  [madebymt](https://wordpress.org/support/users/madebymt/)
 * (@madebymt)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/thumbnail-image-animation/)
 * Hi everyone
    I try to turn my static page to a wordpress theme, I have one image
   element come with animation, I try to use couple ways, but my image won’t load
   on scroll (move up), so I was wondering anyone has any solution? Big thanks!
 * **Here’s my HTML element:**
 *     ```
       <div>
       img src="images/pexels-photo-386151.jpeg" data-w-id="f56f7b61-5a1c-8912-469a-280339605312" style="-webkit-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);-moz-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);-ms-transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);transform:translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0)"
       class="image-3">
       </div>
       ```
   
 * **I turn them to WordPressworpress using**
 *     ```
       <?php the_post_thumbnail('medium',array(
               'class' =>'image-3',
               'style' => '-webkit-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
               -moz-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
               -ms-transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0);
               transform: translateX(0) translateY(152PX) translateZ(0) scaleX(1) scaleY(1) scaleZ(1) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0)'
             ));?>
       ```
   
 * I try to just use class ‘image-3’ on my CSS, but the animation still not working.
 * Thank you guys for the help!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fthumbnail-image-animation%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Muhammad Javed](https://wordpress.org/support/users/leadsoft/)
 * (@leadsoft)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/thumbnail-image-animation/#post-9864485)
 * Hello,
    your wordpress function and its attributes are correct even css also 
   apply correct but the css which you are using for animation that is not correct,
   make sure its correct then it will work. [⌊2018-01-15_0910⌉](https://www.screencast.com/t/uLmCFcDwTl4)
 * Thanks
 *  Thread Starter [madebymt](https://wordpress.org/support/users/madebymt/)
 * (@madebymt)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/thumbnail-image-animation/#post-9864614)
 * Hi [@leadsoft](https://wordpress.org/support/users/leadsoft/)
    Thank you for 
   your response, it works on my regular index.html page, so I don’t know why it
   won’t show up, even I tried other css, it won’t have animation.
 * Like this:
 *     ```
        transform: translate(350px,0);
           -webkit-transform: translate(350px,0); /** Chrome & Safari **/
           -o-transform: translate(350px,0); /** Opera **/
           -moz-transform: translate(350px,0); /** Firefox **/
       ```
   
 * Thank you.
 *  [Muhammad Javed](https://wordpress.org/support/users/leadsoft/)
 * (@leadsoft)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/thumbnail-image-animation/#post-9864682)
 * i have checked the css is also working i have create small video which shows 
   css is working.
    [https://www.screencast.com/t/YycamRY7yxmV](https://www.screencast.com/t/YycamRY7yxmV)
 * Thanks
 *  Thread Starter [madebymt](https://wordpress.org/support/users/madebymt/)
 * (@madebymt)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/thumbnail-image-animation/#post-9871650)
 * Hi [@leadsoft](https://wordpress.org/support/users/leadsoft/)
    Thank you for 
   that awesome video, really appreciated that, super helpful! My transition work,
   but not working on scroll view with my original setup.
 * Thank you so much for your help!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘thumbnail image animation’ is closed to new replies.

## Tags

 * [image](https://wordpress.org/support/topic-tag/image/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [madebymt](https://wordpress.org/support/users/madebymt/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/thumbnail-image-animation/#post-9871650)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics