Description:
In this pure CSS pop-up image has the benefits:
- The pop-up image position can be relative to the thumbnail image or relative to the container of thumbnail images or combinations of both.
- This technique does not use the CSS “visibility” property. Because, if we use this, the hidden image take space behind the page. In some cases, it may be un-usable.
In this technique, we used the CSS negative margin to hide the pop-up image and we used hover rules to show the pop-up image. Here, for pop-up position, we will use CSS property “left” and “top” to show pop-up relative to thumbnail container and we will use CSS property “margin-left” and “margin-top” to show pop-up relative to the thumbnail image. In this example, we set the pop-up image combination of both to relative to thumbnail image and relative to thumbnail container.
DEMO
HTML and CSS code:
<html>
<head>
<style>
div#links {
position:relative;
top:50px;
margin:0px;
margin-bottom:50px;
padding:10px;
border:1px solid red;
width:106px;
height:270px;
}
.imgPop:hover {
background-color:white;
}
span {
position: absolute;
margin:0px;
padding:0px;
border:0px solid red;
margin-left:-9999px;
margin-top:-9999px;
}
a.imgPop:hover span {
margin:0px;
padding: 0px;
border: 5px solid blue;
margin-top:0px;
left:160px;
}
</style>
</head>
<body>
<div id="links">
<a class="imgPop" href="#" title="sample"><img class="thumb" src="img7.jpg" width="75" height="75" alt="sample" border="0" />
<span>
<img src="img7.jpg" width="150" height="150" alt="sample" border="0" />
</span></a>
<a class="imgPop" href="#" title="sample">
<img class="thumb" src="img8.jpg" width="75" height="75" alt="sample" border="0" />
<span>
<img src="img8.jpg" width="150" height="150" alt="sample" border="0" />
</span></a>
<a class="imgPop" href="#" title="sample"><img class="thumb" src="img9.jpg" width="75" height="75" alt="sample" border="0" />
<span>
<img src="img9.jpg" width="150" height="150" alt="sample" border="0" />
</span></a>
</div>
</body>
</html>
No comments:
Post a Comment