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 [[email protected]]
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/
