Grow your CSS skills. Land your dream job.

image gallery with with description and full size image with CSS

  • # January 29, 2013 at 9:36 am

    in the image above , there are three section first one is just showing thumbnail , second one description and the third one full size image .

    I have just created three different for each section . I want to make such a page where if user click on a specific thumbnail image on the left , then second and div will show description and third one will show full size image .

    I don’t want to use javascript , if there is any way to do it with simple CSS or CSS3 ?

    # January 30, 2013 at 2:00 pm

    Hi, how do you plan to show column 2 and 3? On the mockup image it looks like iframes (with scrollbars)?

    Maybe one way to do it is to have just two divs:

    div 1. Thumbnails with position static

    div 2. Text plus big image

    The thumbnail image can have a link to a anchor tag to the corresponding text. But not sure how to have the big image “locked” beside it’s text. Maybe a table (yeah, I know – low tech ;)

    Best, Magnus

    # January 30, 2013 at 2:29 pm

    I don’t think they are iframes.

    I suspect they are customised/stylised overflow scrollbars.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".