CSS image popup

  • suecalvi
  • Born
  • Born
  • suecalvi
  • Posts: 1

Post 3+ Months Ago

I've found this wonderful code at http://www.dynamicdrive.com/style/cssli ... ge-viewer/ and implemented it on my website - http://www.thesucculentgarden.com.au. It works beautifully in Mozilla, Netscape and Safari, but
- I can't get it to work at all in Opera
- in IE6, 'options' text shows through the enlarged image
- in IE7 smaller images disappear at random eg http://www.thesucculentgarden.com.au/gaste.html

If anyone can help, that'd be wonderful!

Code: [ Select ]
The css is -
.exp{
position: relative;
z-index: 0;
overflow:hidden;
}
.exp:hover{
background-color: transparent;
z-index: 50;
}
.exp span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
border:1px solid #4f0516;
visibility: hidden;
color: black;
text-decoration: none;
}
.exp span img{ /*CSS for enlarged image*/
border-width: 0;
}
.exp:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 0; /*position where enlarged image should offset horizontally */
}
  1. The css is -
  2. .exp{
  3. position: relative;
  4. z-index: 0;
  5. overflow:hidden;
  6. }
  7. .exp:hover{
  8. background-color: transparent;
  9. z-index: 50;
  10. }
  11. .exp span{ /*CSS for enlarged image*/
  12. position: absolute;
  13. background-color: #ffffff;
  14. border:1px solid #4f0516;
  15. visibility: hidden;
  16. color: black;
  17. text-decoration: none;
  18. }
  19. .exp span img{ /*CSS for enlarged image*/
  20. border-width: 0;
  21. }
  22. .exp:hover span{ /*CSS for enlarged image on hover*/
  23. visibility: visible;
  24. top: 0;
  25. left: 0; /*position where enlarged image should offset horizontally */
  26. }


and the html (for 1 image) -

Code: [ Select ]
<a name="ga12" class="exp" href="#thumb"><img class="pic" src="images/ga12_small.jpg" width="132px" height="100px" alt="Gasteria batesiana"></img>
<span><img src="images/ga12_large.jpg" alt="Gasteria batesiana"></img></span></a>
<p class="p1"><span>Gasteria batesiana</span></p>
<p class="p2"><span>Smooth shiny dark green lanceolate leaves mottled with white. To 10cm high by 30cm wide. Pink flowers in spring. (South Africa, Namibia). Light shade.</span></p>
<p class="p3"><span>
Quantity: <input type="text" name="GA12" size="2"></input>
Size: <select name="GA12_opt">
<option value="Small">Small $6.00</option>
</select>
<input class="t1" type="button" value="Add to Order" onClick="AddItem('GA12')"></input>
<input type="hidden" name="GA12_price" value="6.00"></input>
<input type="hidden" name="GA12_desc" value="Gasteria batesiana"></input>
</span>
</p>
  1. <a name="ga12" class="exp" href="#thumb"><img class="pic" src="images/ga12_small.jpg" width="132px" height="100px" alt="Gasteria batesiana"></img>
  2. <span><img src="images/ga12_large.jpg" alt="Gasteria batesiana"></img></span></a>
  3. <p class="p1"><span>Gasteria batesiana</span></p>
  4. <p class="p2"><span>Smooth shiny dark green lanceolate leaves mottled with white. To 10cm high by 30cm wide. Pink flowers in spring. (South Africa, Namibia). Light shade.</span></p>
  5. <p class="p3"><span>
  6. Quantity: <input type="text" name="GA12" size="2"></input>
  7. Size: <select name="GA12_opt">
  8. <option value="Small">Small $6.00</option>
  9. </select>
  10. <input class="t1" type="button" value="Add to Order" onClick="AddItem('GA12')"></input>
  11. <input type="hidden" name="GA12_price" value="6.00"></input>
  12. <input type="hidden" name="GA12_desc" value="Gasteria batesiana"></input>
  13. </span>
  14. </p>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.