Ordered List Items with Images that overlap

Asked Oct 26 '19 at 01:12

Active Oct 26 '19 at 17:12

Viewed 70 times

I cant seem to get my ordered list have images that overlap, but when you hover over them it expands or shows the full image, im guessing this is done best with CSS and onhover function?

Here is the code i have, where i can get them to stack, but not sure how to make it when you hover over it pops up a bigger image of the card like that.

<ul id="sortable" style="list-style: none;padding: 0;">
    <li class=ui-state-default >
        <div style=height:30px>
            <img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
        </div>
        <div style=height:30px>
            <img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
        </div>
        <div style=height:30px>
            <img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
        </div>
    </li>
</ul>

edited Oct 26 '19 at 17:12

asked Oct 26 '19 at 01:12

Joe Fox

please share the code you have done trying to achieve this. – Nidhin Joseph Oct 26 '19 at 01:13
Just updated the main post :) – Joe Fox Oct 26 '19 at 17:12
Try with flexbox or look at this https://stackoverflow.com/questions/43919067/make-flex-items-overlap/43919987 – Emanuele Oct 26 '19 at 17:24

Ordered List Items with Images that overlap

0 Answers0