Header image animation on WP 2014

  • Resolved trev9012

    (@trev9012)


    9 years, 8 months ago

    Hi,

    I’ve recently added the Animate It! plugin and it’s fab 🙂

    I’m trying to animate the header image on my WordPress 2014 site but not having a lot of luck.

    I have the Simple Custom CSS plugin installed and wondered if you could give an example of the CSS that I’d need to add.

    If I need to add HTML anywhere please could you give an example and where to add it.

    The image in WP media library does not have a field to add CSS.

    Many thanks,
    Trevor

Viewing 1 replies (of 1 total)
  • Plugin Author eleopard

    (@eleopard)

    9 years, 7 months ago

    By inspecting the page, I can see that you can easily achieve this effect by simply, pasting the following CSS in: Settings > Animate It! > Custom CSS box

    Please copy the content in between the 2 lines (leave the lines ______ )

    _______________________

    #site-header{
    z-index: 9;
    }

    #site-header img:hover{
    -webkit-animation: pulse;
    animation: logozoom 1s;
    }

    @-webkit-keyframes logozoom {
    from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }

    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.3, 1.3, 1.3);
    }

    to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }

    @keyframes logozoom {
    from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }

    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.3, 1.3, 1.3);
    }

    to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }

    _______________________

    I have custom created this CSS using the existing ID and classes used in the theme. So there won’t be any other changes required.

Viewing 1 replies (of 1 total)

The topic ‘Header image animation on WP 2014’ is closed to new replies.