Mouse effect

  • mutter

    (@mutter)


    6 years ago

    The Hover effect – pages moving when you point at them with the mouse – shown on this website [ redundant link removed ] , what is that effect called and is there a tutorial about it?

    • This topic was modified 6 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    6 years ago

    I doubt it has a name or a tutorial.
    It is some images that have a lot of CSS applied for position, shadow, scaleX, scaleY, skewX, skewY, rotateX, rotateY, rotateZ. Then more CSS with different values for the hover state.

    Here is the basics for one image

    .image-stack .et_pb_image { position: absolute; bottom: 0; }
.et_pb_image_3 {
    transform: scaleX(0.9) scaleY(0.9) translateX(0px) translateY(-150%) rotateX(19deg) rotateY(322deg) rotateZ(0deg) skewX(28deg) skewY(3deg);
    transition: transform 300ms ease 0ms,transform 300ms ease 0ms,transform 300ms ease 0ms,transform 300ms ease 0ms;
}
.et_pb_image_3:hover {
    transform: scaleX(0.95) scaleY(0.95) translateX(0px) translateY(-120%) rotateX(23deg) rotateY(325deg) rotateZ(2deg) skewX(16deg) skewY(9deg) !important;
}

    which you can see using your browser’s Developer Tools on the page.

    Thread Starter mutter

    (@mutter)

    6 years ago

    Hi Joy
    Thx. for your reply. I had looked at the code, but it wasn’t much help 🙁

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

The topic ‘Mouse effect’ is closed to new replies.

Tags