CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwentytwenty
CodingPanda
CodingPanda

Reputation: 13

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

Upvotes: 0

Views: 387

Answers (1)

Khaled Al-Ansari
Khaled Al-Ansari

Reputation: 3970

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;

Upvotes: 0

Related Questions