You May Also Like

About the Author: admin

14 Comments

  1. Thanks for the video. Here are the codes for anyone needing them.
    _________________________________________________
    CSS:
    ________________________________________________
    .hoverbox{
    cursor: default;
    list-style:none;}

    .hoverbox a{
    cursor: default;
    }

    .hoverbox a .preview{
    display:none;
    }

    .hoverbox a:hover .preview{
    display:block;
    position: absolute;
    top: -330px;
    left: -45px;
    z-index:1;
    }

    .hoberbox img{
    backgrounnd:#fff;
    boder-color #aaa #ccc #ddd #bbb;
    border-style:solid;
    border-width: 1px;
    color:inherit;
    padding: 2px;
    vertical-align:top;
    width:175px;
    }

    .hoverbox li{
    backgrounnd:#eee;
    boder-color #ddd #bbb #aaa #ccc;
    border-style:solid;
    border-width: 1px;
    color:inherit;
    display:inline;
    float:left;
    margin:3px;
    padding:5px;
    position:relative;
    }

    .hoverbox .preview{
    border-color:#000;
    width:300px;
    }

    .hoverbox a{
    position:relative;
    }

    .hoverbox a:hover{
    display:block;
    font-size:100%;
    z-index:1;
    }

    .hoverbox a:hover .preview{
    top: -38px;
    left: -50px;
    }

    hoverbox li{
    position:static;
    }

    ____________________________________________________________
    HTML:
    ____________________________________________________________
    <div id="gal">

    <h1>Gallery</h1>
    <hr>
    <ul class="hoverbox">

    <li>
    <a href="1.jpg"><img src="1.jpg" alt="text"/>
    <img src="1.jpg" alt="text" class="preview"/></a>
    </li>
    <li>
    <a href="2.jpg"><img src="1.jpg" alt="text"/>
    <img src="2.jpg" alt="text" class="preview"/></a>
    </li>
    <li>
    <a href="3.jpg"><img src="1.jpg" alt="text"/>
    <img src="3.jpg" alt="text" class="preview"/></a>
    </li>
    <li>
    <a href="4.jpg"><img src="1.jpg" alt="text"/>
    <img src="4.jpg" alt="text" class="preview"/></a>
    </li>
    <li>
    <a href="5.jpg"><img src="1.jpg" alt="text"/>
    <img src="5.jpg" alt="text" class="preview"/></a>
    </li>
    <li>
    <a href="6.jpg"><img src="1.jpg" alt="text"/>
    <img src="6.jpg" alt="text" class="preview"/></a>
    </li>

  2. ok. very easy simple gallery. thank you. question? how do you get it to go horizontal instead of vertical?
    I copied everything exactly and my gallery goes vertically?

  3. It is possible to make available to all browsers. 
    Use -webkit-transition and -moz-transition and so on.
    Depending on what kind of browsers you want to view.

Comments are closed.