Is there a way to align two images side by side and then include a <div> with a smaller width and apply overflow: hidden?
Similar to a slider. I keep getting images stacked on top of each other (block level), but I want them inline.
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
.slider div {
background-color: red;
position:relative;
}
img {
width: 600px;
height: 300px;
position:relative;
display:inline-block;
}<div class="slider"><div>
<img src="https://lh3.googleusercontent.com/proxy/Lg1sxGxpUtviON3zqYv_Pjz_gLMf2YhlOvuFPe1-zfusYQum6pOfMrXRCxR6MfnUoJ7IK2VAihsNxJkL0qhmRVRo1vxTpClk_970lE6gp5XQ" alt="">
<img src="https://imgcomfort.com/Userfiles/Upload/images/illustration-geiranger.jpg" alt="">
</div>
</div>