How to create image gallery in CSS

Discussion in 'HTML & Website Design' started by mukesh4bs, Jul 21, 2013.

  1. #1
    The CSS Image Gallery is normally used to display larger number of thumbnail images on a single page. The unique feature of this CSS gallery is the “Zoom-in” effect of thumbnail image. It appears automatically when you hover over the thumbnail image. Moreover, you can also add HTML based caption to the enlarged image.

    Image Gallery with Hover Effect

    CSS coding


    .imagegallery { position: relative }
    .small {
        font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
        font-size: 1.5em;
    }
        .small img {
            border: 1px solid white;
            margin: 0;
        }
    .small:hover { background-color: transparent }
    .small span {
        position: absolute;
        background-color: #ededed;
        padding: 5px;
        left: -1000px;
        border: 1px solid #d7d7d7;
        visibility: hidden;
        color: black;
        text-decoration: none;
    }
        .small span img {
            border-width: 0;
            padding: 2px;
        }
    .small:hover span {
        visibility: visible;
        top: 0;
        left: 230px;
        z-index: 50;
    }
    Code (markup):
    HTML coding
    <div class="imagegallery">
        <a class="small" href="#"><img src="images/yoga_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/yoga.jpg"/><br/>Yoga session</span></a>
        <a class="small" href="#"><img src="images/gym_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/gym.jpg"/><br/>Fitness training</span></a>
        <br/>
        <a class="small" href="#"><img src="images/bilberry_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/bilberry.jpg"/><br/>Bilberry fruit</span></a>
        <a class="small" href="#"><img src="images/flower_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/flower.jpg"/><br/>Beautiful flower</span></a>
        <br/>
        <a class="small" href="#"><img src="images/inter_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/inter.jpg"/><br/>Safe intercourse</span></a>
        <a class="small" href="#"><img src="images/maitake_small.jpg" width="100px" height="60px" border="0"/><span><img src="images/maitake.jpg"/><br/>Maitake mushroom</span></a>
        <br/>
        <a class="small" href="#">Horse Chestnut<span><img src="images/hc.jpg"/><br/>Tasty chestnuts</span></a>
        <br/>
        <a class="small" href="#">Emotional<span><img src="images/emotional.jpg"/><br/>Emotional Sobriety</span></a>
    </div>
    HTML:

     
    mukesh4bs, Jul 21, 2013 IP
  2. s.molinari

    s.molinari Member

    Messages:
    82
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    45
    #2
    Thanks for that! Is there a Web Design Tips and Tricks Forum here? This would be a good thread for it.;)

    Scott
     
    s.molinari, Jul 22, 2013 IP
  3. glennyjoycelyn

    glennyjoycelyn Banned

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Try this coding

    <html>
    <head>
    <style>
    div.img
    {
    margin:2px;
    border:1px solid #0000ff;
    height:auto;
    width:auto;
    float:left;
    text-align:center;
    }
    div.img img
    {
    display:inline;
    margin:3px;
    border:1px solid #ffffff;
    }
    div.img a:hover img
    {
    border:1px solid #0000ff;
    }
    div.desc
    {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:2px;
    }
    </style>
    </head>
    <body>

    <div class="img">
    <a target="_blank" href="klematis_big.htm">
    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis2_big.htm">
    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis3_big.htm">
    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
    <a target="_blank" href="klematis4_big.htm">
    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
    </a>
    <div class="desc">Add a description of the image here</div>
    </div>

    </body>
    </html>
     
    glennyjoycelyn, Jul 22, 2013 IP