How to right-align Elementor HTML-element?-CodePudding

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;" >

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

<img  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)

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

CodePudding user response：

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;
}

CodePudding user response：

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;
    }

CodePudding user response：

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;" >

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

<img  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>