himi420

Hello,

I use W3 responsive layout (W3.CSS) and I am trying to create photo gallery. When displaying a single photo I want to have hover overlay above the photo so it is possible to navigate to previous / next photo. When hovered above left part of the photo < is displayed and when clicked goes to previous photo, same for > over right part of the photo.

So far I managed to do that using relative/absolute/flex positioning but it is not responsive, the position stays the same when window size is smaller and messes up page layout.
Image size, width is which matter, is not always the same. Also I would like to have w3 container immediately below the photo for further info (title and other details). When I add it the layout is broken completely.

I have this and hover navigation works. It is not responsive, I cannot add any w3 container for further info under a photo unless breaking the layout.

Is there a way doing this a cleaner way using W3 styling? Many thanks!

<div style="background:#fff; position:relative; padding:0; margin:0;">

	<a href="#left" >
	<div style="position:absolute; top:0px; background:none; align-items:center; display:flex; left:95px; height:667px;">
	&nbsp;&lt;&nbsp;
	</div>
	</a>

	<img src="photo.jpg" style="max-width:100%;">

	<a href="#right" style="position:absolute; top:0px; background:none; align-items:center; display:flex;">
	<div style="position:absolute; top:0px; background:none; align-items:center; display:flex; right:95px; height:667px;">
	&nbsp;&gt;&nbsp;
	</div>
	</a>
	
</div>