42 users online (0 members and 42 guests)  


  Results 1 to 2 of 2

Related

  1. Positioning of image    Forum: HTML Forum
    Replies: 3
  2. Image Positioning    Forum: HTML Forum
    Replies: 4
  3. image positioning    Forum: HTML Forum
    Replies: 1
  1. #1
    kkmm's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Posts
    2

    Arrow CSS Image Pop Up - Positioning

    I am trying to position the enlarged images so they all pop-up in the same place. Instead the enlarged images stagger down the page when I mouseover each thumbnail (from top to bottom).

    See www.kellymadden.com/paintings.html for source code. Thank you for your help.

    Here is the CSS (and below is the html)

    .thumbnail{
    position: relative;
    z-index: 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */

    }



    Here is the html:

    <!-- ****** POP UP IMAGE CODE ****** -->


    <div style="position:absolute;top:130px;left:370px;">
    <center>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>

    <a class="thumbnail" href="#thumb"><img src="images/ph2.jpg" width="100px" height="66px" border="0" />
    <span><img src="images/ph3.jpg" /><br />Nice.</span></a>
    <a class="thumbnail" href="#thumb"><img src="images/ph1.jpg" width="100px" height="66px" border="0" />
    <span><img src="images/ph4.jpg" /><br />cool text.<span></a>
    <a class="thumbnail" href="#thumb"><img src="images/ph2.jpg" width="100px" height="66px" border="0" />
    <span><img src="images/ph3.jpg" /><br />Nice.</span></a>
    <a class="thumbnail" href="#thumb"><img src="images/ph1.jpg" width="100px" height="66px" border="0" />
    <span><img src="images/ph4.jpg" /><br />cool text.<span></a>


    <br />

    <a class="thumbnail" href="#thumb">This here<span><img src="images/pp2.jpg" /><br />Kelly 1</span></a><br />
    <a class="thumbnail" href="#thumb">This here<span><img src="images/pp1.jpg" /><br />Kelly 2</span></a>

    </td>
    </tr>
    </table>
    </center>
    </div>

  2. #2
    kkmm's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2010
    Posts
    2

    Smile Re: CSS Image Pop Up - Positioning

    I found the answer.

    Needed to remove the "position: relative;" in the code below.

    .thumbnail{
    position: relative;
    z-index: 0;
    }