Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67497

Div overlay frame fitted

$
0
0

The goal I want to achieve:

  • Have a picture "carousel"
  • frame rests in place while images inside appear and disappear but gets resized according the images' size. The frame is a png with just the outer part colored.

Would I need a outer div that changes its size according to its inner img-tag with another div that will always stay on top (serving another image as png-frame) of the image no matter how the size of the img-tag changes?

Any structure of tags and styles is welcome, perhaps inner divs or spans or whatever. JavaScript is an option but I would very well be interested in a pure CSS approach.

<div id="outer">
    <img id="frameOnTop" src="...">
    <img id="image" src="...">
</div>

EDITED

WORKING EXAMPLE:

https://codepen.io/xdx950/pen/eYYXjBa


Viewing all articles
Browse latest Browse all 67497

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>