SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    0 Post(s)
    0 Thread(s)

    CSS Image Gallery


    I have an image gallery (thumbnails and large image) created using css and so far it works as I want it to BUT I would like to be able to change the thumbnail images according to a logo link clicked at the top.

    You can view the gallery here:


    You'll see that the 4 images displayed are for AGA but I want to be able to change theses images to display Falcon, Rangemaster and Rayburn accordingly by clicking the logos.

    All the images are there and hidden in their own divs but I'm not sure how to get them to display when a link is clicked.

    My css is:

    /*Credits: Dynamic Drive CSS Library */
    #gallery {
    position: relative;
    	top: 0px;
    	left: -1px;
    #links {
    padding: 0 0 10px 5px;	
    #aga {
    visibility: visible;
    #falcon {
    visibility: hidden;
    #rangemaster {
    visibility: hidden;
    #rayburn {
    visibility: hidden;
    .thumbnail {
    border: 1px solid #808080;
    margin: 2px;
    padding: 2px;
    span { 
    position: absolute;
    background-color: #ccc;
    padding: 20px;
    left: -1000px;
    visibility: hidden;
    color: #666;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    text-decoration: none;
    width: 500px;
    span img { 
    border: 1px solid #fff;
    a:hover span { 
    visibility: visible;
    top: 47px;
    left: 350px;
    z-index: 50;
    is anyone able to help?


  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Whiteford, Maryland, United States
    16 Post(s)
    0 Thread(s)
    In your HTML do some restructuring. Move links inside (right before you declare the images (the small ones)) and you shouldn't have to change your CSS to be the same as the original thumbnail.
    Always looking for web design/development work.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts