How to tilt image angle?

  • Tina

    (@sunflowermom)


    1 year, 7 months ago

    I am trying to figure out how to replicate the image tilt you see here:

    https://hellobeaches.co/

    I know there is a way to do this with CSS, as I learned how to do it in Elementor here: https://youtu.be/Q8qaDe2SXIc

    But right now I cannot afford Elementor Pro and I figure there has to be a way to do this just with WP blocks, yes?

    Is there a way to do this so that I can make different images tilt at different angles, specific to each image? (Not uniform tilts across the site)

    I am not super code savvy, so any help would be GREATLY appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    You can apply custom CSS without Elementor Pro. Use your browser’s element inspector tool to help you come up with the right selectors to target the image you want to tilt (and only that image). Then apply these rules:

    transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);

    The last 3 are for older browser support, you might choose to not use them. Alter the -3 value as desired. You can try out these rules in the element inspector tool to see the effect, but it will not persist there. For persistence, copy the selectors and rules to the Additional CSS section of the customizer or style book.

    It can sometimes be difficult to target only one specific element. Useful selectors when nothing else works are unique body classes like “post-1234” and the :nth-child() pseudo-selector. The problem with nth-child() is it could fail to work properly when the page’s content is altered in a way that throws the child count off.

    Thread Starter Tina

    (@sunflowermom)

    THANK YOU! I will play around with this! Very helpful!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to tilt image angle?’ is closed to new replies.