javascriptjqueryhtmlcsstwentytwenty

twentytwenty js | positioning of an <img>


I'm working on a Website and there is a case of a "before-after" animation which i did with twentytwenty js.

It works fine everywhere except for one page, where the after image(right side) doesn't seem to fit into the "container". The images should have a light border but it just shows up at the top. Using "border: 1px solid lightgrey" has the same result.

Link to the problem page:

http://www.nordglueck.com/printness/html/Referenz/raumplus_Faltposterbroschuere_Illustration_nach_Bild.html


Solution

  • Fast solution! add right: 0; to the .twentytwenty-container img in the twentytwenty.css file and in your style.css file take 2px from the width and height in the .bild-1 class

    you final output will look like this

    in your twentytwenty.css

    .twentytwenty-container img
        max-width: 100%;
        position: absolute;
        top: 0;
        right: 0px;
        display: block;
    

    in you style.css

    .bild-1
        width: 388px;
        height: 348px;
        display: inline-block;
        float: right;