As chrisburton suggested here's the new thread about more complex rollovers.
I've adapted chris codepen example to my project and everything went fine except for links in the rollover. If i put links in the rollover it breaks my masonry layout.
I made an example (actually another fork of chris snippet) on Codepen
The rollover won't work as long as there's an a tag somethere inside the rollover.
it seems it has something to do with nesting links in links but how am i supposed to handle that?
You may have to use absolute positioning to position the overlay over the image.
Something like this:
<!-- Use relative positioning -->
<a class="container">
<img src="" />
</a>
<!-- Use absolute positioning to move this on top of the container -->
<div class="overlay">
<ul>
<li><a href="#">tags</a></li>
<li><a href="#">tags</a></li>
<li><a href="#">tags</a></li>
</ul>
</div>
Hmm. I'm not sure how to go about this since you need the whole thing to wrap in an anchor tag (and you can't nest anchor tags). If I go about it the way I was thinking, the ul that wraps around the tags will not be clickable.
If we go about it the way you'd like, the user could accidentally clicks outside one of the tags and be redirected to wherever the thumbnail links to. Basically it could be annoying to the user.
i don't think there will be too much trouble with usability since the tag links are quite big in size as you can see here http://tingeltangel.megavillain.org/
As chrisburton suggested here's the new thread about more complex rollovers.
I've adapted chris codepen example to my project and everything went fine except for links in the rollover. If i put links in the rollover it breaks my masonry layout.
I made an example (actually another fork of chris snippet) on Codepen The rollover won't work as long as there's an a tag somethere inside the rollover.
it seems it has something to do with nesting links in links but how am i supposed to handle that?
Many thanks in advance.
The problem is that you can't nest anchor links.
You may have to use absolute positioning to position the overlay over the image.
Something like this:
but isn't the overlay already positioned absolutely?
Hang on that might not work. Do you have codepen pro?
no. I'm more of a casual coder (as one can obviosly see), sorry :(
Hmm. I'm not sure how to go about this since you need the whole thing to wrap in an anchor tag (and you can't nest anchor tags). If I go about it the way I was thinking, the
ulthat wraps around the tags will not be clickable.If we go about it the way you'd like, the user could accidentally clicks outside one of the tags and be redirected to wherever the thumbnail links to. Basically it could be annoying to the user.
i don't think there will be too much trouble with usability since the tag links are quite big in size as you can see here http://tingeltangel.megavillain.org/
What is the browser support requirement?
@bogus This is as far as I could go with it: http://codepen.io/chrisburton/pen/jesmr
Your best solution is probably jQuery.