My current dilemma involves stacking images to create a slideshow, but the situation is proving to be more complex than expected. Simply applying position: absolute leads to undesirable results. I am unsure of any alternative solutions at this point.
<div class="article photo post">
<div class="inner">
<div class="overlay">
<div class="title vertical">Title</div>
</div>
<div class="content slideshow">
<img src="https://dl.dropboxusercontent.com/u/3618143/2-large.jpg" style="max-width: 40vw; display: inline;">
</div>
</div>
</div>
<div class="article photo post">
<div class="inner">
<div class="overlay">
<div class="title vertical">Title</div>
</div>
<div class="content slideshow">
<img src="https://dl.dropboxusercontent.com/u/3618143/1-large.jpg" style="max-width: 40vw; display: inline;">
<img src="https://dl.dropboxusercontent.com/u/3618143/2-large.jpg" style="max-width: 40vw; display: inline;">
<img src="https://dl.dropboxusercontent.com/u/3618143/3-large.jpg" style="max-width: 40vw; display: inline;">
<img src="https://dl .dropboxusercontent.com/u/3618143/4-large.jpg" style="max-width: 40vw; display: inline;">
</div>
</div>
</div>
.article {
position: relative;
float: none;
display: inline-block;
vertical-align: bottom;
padding: 10px;
}
... (remaining CSS code) ...
.content img {
max-height: 70vh;
}