Image pop in CSS with no JavaScript

Discussion in 'CSS' started by Mentalhead, Aug 24, 2009.

0
  1. #1
    I want to make a gallery for a website with small thumbnails and when you place your cursor over the image the bigger image would just pop out.
    I know it's possible using only CSS, I made it quite simple but it doesn't work in IE 6 (Firefox renders in perfectly)
    So I just want to ask you guys to share your technique of making and optimizing image pop in CSS without JavaScript.
     
    Mentalhead, Aug 24, 2009 IP
  2. buzza_gts

    buzza_gts Active Member

    Messages:
    199
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Are you simply changing the size of the img on hover? should work in all browsers.
     
    buzza_gts, Aug 24, 2009 IP
  3. Mentalhead

    Mentalhead Active Member

    Messages:
    1,344
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    53
    #3
    This is my current code:
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@import "stil.css";
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p><a><img src="../Web Projekti/prototip/PUCA/images/kmd-vrga.jpg" /><span><img src="../Web Projekti/prototip/PUCA/images/kmd-vrga.jpg" /></span></a></p>
</body>
</html>
    Code (markup):
    And CSS:
    
body, div, img, p, span
{ margin:0;
padding:0;
border:0;
}
a span img{
	display:none;
}
a:hover span img{
	display:block;
	position:absolute;
	top:70px;
	left:70px;
}
    Code (markup):
    And it doesn't work in IE6
    I also tried this CSS as you said but I still get the same result:
    body, div, img, p, span
{ margin:0;
padding:0;
border:0;
}
a span img{
	width:0px;
	height:0px;
}
a:hover span img{
	width:400px;
	height:400px;
        position:absolute; 
	top:70px;
	left:70px;
}
    Code (markup):
     
    Mentalhead, Aug 25, 2009 IP
  4. 1 FineLine

    1 FineLine Peon

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    1 FineLine, Aug 25, 2009 IP
  5. Mentalhead

    Mentalhead Active Member

    Messages:
    1,344
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    53
    #5
    Yes, I would like to get effect like that, but code seams bit too confusing to me, is there a simpler solution?
     
    Mentalhead, Aug 25, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Assuming the regular img is the thumb and the img in the span is the biggie:
    
html, body, ol, ul
{ margin:0;
}
img {
  border: 0;
}

a {
  position: relative;
}
a span {
  position: absolute;
  left: offscreen (-9999em or whatever)
  top: 0; (not necessary but who knows what some browser will do without it)
	width:400px;
	height:400px;
}
a:hover span, a:focus span {
        top: 70px;
	left: 70px; (or however far you want from left side of anchor)
}
    Code (markup):
    Here, the original image (I'm assuming thumb) sits normally on the page. The span sits offscreen.

    When the anchor is hovered or focussed (keyboarders surf too) the span appears onscreen.

    The anchor needs to be "positioned" so the span knows who to use as 0, 0.

    You can also just have two images and give the one who appears and disappears a class.

    Your images should have a height and width in the HTML declared. You MUST give them each an alt attribute (though since they show the same thing I'd make the large image be alt="").
     
    Stomme poes, Aug 26, 2009 IP
  7. Mentalhead

    Mentalhead Active Member

    Messages:
    1,344
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    53
    #7
    Thank you, but I've found a bit simpler solution that works.
    Here's HTML:
    
<a class="imgPop" href="sample.html" title="sample">Sample
<span><img src="thumb.jpg" width="64" height="64" alt="sample"
border="0" /></span></a>
    Code (markup):
    And CSS:
    
a.imgPop {
    position:relative;
    z-index:20;
}
a.imgPop:hover {
    display:inline;
    z-index:30;
}
a.imgPop span {
    display:none;
}
a.imgPop:hover span {
    display:block;
    position:absolute;
    top:1em;
    left:1em;
    width:64px;
    height:64px;
}
    Code (markup):
    This code didn't work well for me, cause it wouldn't display big image the same way in IE and FF, so I've changed position of a.imgPop from relative to absolute and it works well for now. :)
     
    Mentalhead, Aug 26, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You could also
    
a.imgPop span {
    display:none;
    position:absolute;
    top:1em;
    left:1em;
    width:64px;
    height:64px;
}
a.imgPop:hover span {
    display:block;
}
    Code (markup):
    because I get into trouble if I list all the "defaults" on the hovers sometimes. Though if yours is working for you in all browsers, leave it.
     
    Stomme poes, Aug 28, 2009 IP