How to overlay images with tags?

Question

How can I overlay the small image (tag_smallimage) with the large image (tag_largeimage) ?
with HTML is...
<div style="position: absolute; z-index:100"><img src="yourimage1"></div>
<div style="position: absolute; z-index:5000"><img src="yourimage2"></div>
but how it works with tags?
Thank you in advance!

Answer 1

Well first off, your CSS is a little overkill.  You don't really need z-index at all since the image you want overlayed on top of the other image comes after the small image in the markup.  You can just set position:absolute and it will appear above your image by default. You'd want to use z-index if an element that comes before another element in the markup is required to be layered on top. Also, try to avoid inline styles unless you are doing an email campaign, in which case, inline styles are best practice since email clients rarely adhere to web standards.
I'm assuming you are creating a web app and you've creted the "smallimage" and "largeimage" fields already for your web app. Here's the HTML:
<div class="image-container">
     <div class="small-image">
          {tag_smallimage}
     </div>
     <div class="large-image">
          {tag_largeimage}
     </div>
</div>
And here's some CSS that you can put in your main stylesheet:
.image-container { position: relative; }
.large-image { position: absolute; top: 0; left: 0; }
This should work for you but you might run into problems with the large images running on top of other image groups if you use this in multiple places on one page.  What is your goal for these images?  A hover effect so that the large image shows when you hover over the small one?