Question 29779 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to right-align Elementor HTML-element? – WordPress

I’m currently developing an Elementor website with the feature to change an image when hovering.
Because it is only possible to do this with some workarounds, I found the solution to use the Elementor HTML widget and paste the following code:

<div style="    text-align: right;" class="image--wrapper">

<img  class="before" style="display: flex; justify-content: flex-end"src="https://studiosittel.de/wp-content/uploads/2022/08/DSC04499-scaled-e1660744165308.jpg" alt="Maximilian Sittel">

<img class="after" src="https://studiosittel.de/wp-content/uploads/2022/08/DSC04631-scaled-e1660744225616.jpg" alt="Pascal Meyer">

</div>

In addition with the following CSS code I’m able to get what I want:

.image--wrapper{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
overflow: hidden; position: relative; } .before, .after{ width:50%; max-width: 60%; -o-object-fit: cover; object-fit: cover;
} .after{ opacity: 0; position: absolute; -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .image--wrapper:hover .after{ opacity: 1; }

Now to the issue I face:
The content of the HTML widget needs to be right-aligned, but whatever I try, it keeps left-aligned (here an image for reference)(here an image for reference)

How can I get the image inside the HTML widget to be right-aligned?

Tags:

4

Answers


  1. 0

    You can use margin-left: auto to push the images to the right:

    .before,
.after {
    width: 50%;
    max-width: 60%;
    -o-object-fit: cover;
    object-fit: cover;
    // Maybe you can add this line
    margin-left: auto;
}
    Login or Signup to reply.
  2. 0

    Beacause .image–wrapper is a display:flex have you tried to delete de direction:colum and use align-content: flex-end / align-item: flex-end?

    .image--wrapper{ 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal; 
    overflow: hidden; 
    position: relative; 
    align-content: flex-end;
    align-item: flex-end;
    }
    Login or Signup to reply.
  3. 0

    You can use margin left auto if you have not much time, also you can play with flexing
    for example make your div with image to display:flex and play arround with position
    to push your hovering image to the right, add right:0 to absolute image, see the code, it’s working

    <div style="    text-align: right;" class="image--wrapper">

<img  class="before" style="display: flex; justify-content: flex-end"src="https://studiosittel.de/wp-content/uploads/2022/08/DSC04499-scaled-e1660744165308.jpg" alt="Maximilian Sittel">

<img class="after" src="https://studiosittel.de/wp-content/uploads/2022/08/DSC04631-scaled-e1660744225616.jpg" alt="Pascal Meyer">

</div>
<style>
.image--wrapper{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
overflow: hidden; position: relative; } .before, .after{ width:50%; max-width: 60%; -o-object-fit: cover; object-fit: cover;margin-left:auto;} .after{ opacity: 0; position: absolute; -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; right:0; } .image--wrapper:hover .after{ opacity: 1; }
</style>
    Login or Signup to reply.
  4. 0

    You can just use flexbox system by setting with of outer div.

    div{
width:100%; /*only for example*/
display:flex;
justify-content:flex-end;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search