Jump to content

Photo navigation layout


Recommended Posts

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>

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...