Luc wrote: > Hello list, > > Problem page: http://www.dzinelabs.com/sandbox/GrupoMP/Pages/Frotacop2.html > > Css embedded. > > Desired result: > > i'm looking to keep the big image on hover to be centred inside the > gallery when resizing the viewport to a smaller viewport. > > Problems i'm encountering: image is distorted and not centred. > The #thumbs.bigpix class to have the first image always displayed > also doesn't kick in. > > The gallery styles are at the end of the css. > > TIA!! > >
Desperado, I am not sure I can help. What prevents the large image from sliding all the way across, and beneath, all the thumbs is that you forgot to add left: 0; in #thumbs a:hover img {...}. The image distortion and maintaining proportionality of the images as the window size decreases is yet another matter. Easy to do if the image dimension is not hard-coded. However, I did not find a way -- perhaps someone else will --to do this and still maintain the image functionality "on-hover." If you can change the mark-up, the possibility of a different -- yet functional -- image gallery is possible. Set a fixed width and height for the parent block and the large images. And move that block from the center column, to beneath all 3 colums. I only checked this quickly in FF. Seems to hold in a 640 window. You will need to adjust the position of this paragraph: <p>Para ampliar as fotos, passe o mouse sobre as miniaturas.</p> Please see: <http://chelseacreekstudio.com/ca/cssd/y.htm> As ever, Salma Hayek ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/