Jump to content

Photo navigation layout


Recommended Posts


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;">

	<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;">


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...