Jump to content

Slideshow And Enlarged Image On Hover


Guest Enaid
 Share

Recommended Posts

HelloI am not only new to this forum but to CSS. Most of the very basic knowledge I have comes form W3C Schools and lurking on this forum.I was wondering how people with CSS expertise will go about if we want to position absolutely an image not in respect to the direct parent containing block (that is, the first ascendant that is not position static).Let us say, we have this HTML code:<div id="display"> <div id="largeimageoverhere"> </div> <div class="capsule"> <ul id="galimg"> <li class="fig"><img class="thumb" src="pict1.png" /><div class="large"><img src="pict1_large.png" /></div> </li> <li class="fig"><img class="thumb" src="pict2.png" /><div class="large"><img src="pict2_large.png" /></div> </li> <li class="fig"><img class="thumb" src="pict3.png" /><div class="large"><img src="pict3_large.png" /></div> </li> <li class="fig"><img class="thumb" src="pict4.png" /><div class="large"><img src="pict4_large.png" /></div> </li> </ul> </div> </div></div>Then, we have some JS to move up and down the <li>'s by setting the coordinates of ul #galimg.And then have everything about presenting in a stylesheet. Following slideshow style examples, I have made to work this by making the #capsule {overflow: hidden}, setting div class .large {display: none} and fixing the coordinates of #galimg with JS; but to do that I need #galimg {position: absolute} and so it becomes the containing block of div class .large.Having done that, it would be great if I could have the large image being displayed at the same position (over the area of div class .largeimageoverhere). Is it possible to bypass ul #galimg and that the containing block for .large be a higher ancestor?Any of you think this is possible or I should make an entirely new approach. (What I am trying to achieve is a slideshow and when you hover over an image that image is displayed enlarged. I have only located slideshows like that if they use oveflow: scroll, in my case the scrolling effect is made as custom.)Thanks in advance and I apologize for any unclear aspect or inappropriate addressing to this forum, CSS is an entire new world (I do not have the experiment uploaded as this is just vocational curiosity wheteher I understand CSS).Enaid

Edited by Enaid
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
 Share

×
×
  • Create New...