Enlarged view of image Cool CSS Image Pop-up
Tweet
Enlarged view of image Cool CSS Image Pop-up
I discovered this effect at www.phpasks.com this is my modification that I used for one of my real estate sites. This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!
When you hover your mouse over the thumbnail the larger image appears beside it. Move your mouse off the thumbnail image to pop-down the enlarged image.
The large image is already displayed at 1px by 1px then “pops up” on mouse over.
You can take a look at my style sheet here. It is NOT perfect but it does validate.
DEMO
HTML CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> CSS ~ Image Pop UP at Phpasks.com</title>
<meta name="Keywords" content="web design ">
<meta name="Description" content="CSS ~ Image Pop-up">
<link rel="stylesheet" media="all" type="text/css" href="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/picpopup.css">
</head><body>
<div id="info">
<br>
<div id="pic">
<a href="http://www.phpasks.com/blogs/enlarged-view-of-image-cool-css-image-pop-up/" title="thumbnail image"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/front3tn.jpg" alt="Thumbnail image" title="Thumbnail image" width="135" height="90">
<img src="picpopup_files/front3.jpg" alt="Enlarged view of image" title="Enlarged view of image" width="350" height="233"></a>
</div>
<div id="pic">
<a href="http://www.phpasks.com/blogs/enlarged-view-of-image-cool-css-image-pop-up/" title="thumbnail image"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/front3tn.jpg" alt="Thumbnail image" title="Thumbnail image" width="135" height="90"><img src="picpopup_files/front3.jpg" alt="Enlarged view of image" title="Enlarged view of image" width="350" height="233"></a>
</div>
<div id="pic">
<a href="http://www.phpasks.com/blogs/enlarged-view-of-image-cool-css-image-pop-up/" title="thumbnail image"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/front3tn.jpg" alt="Thumbnail image" title="Thumbnail image" width="135" height="90"><img src="picpopup_files/front3.jpg" alt="Enlarged view of image" title="Enlarged view of image" width="350" height="233"></a>
</div>
<h2>Cool CSS Image Pop-up</h2>
<p>I discovered this effect at www.phpasks.com
this is my modification that I used for one of my real estate sites. This is
an Pop-UP image effect that is similar to the ones you see using JavaScript
on
mouseover or on click but THIS ONE uses ONLY CSS!</p>
<p>When you hover your mouse over the thumbnail the larger image appears beside it. Move
your mouse off the thumbnail image to pop-down the enlarged image.</p>
<p>The large
image is already displayed at 1px by 1px
then "pops
up" on
mouse over. </p>
<p>You can take a look at my style sheet <a href="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/picpopup.css">here</a>. It is NOT perfect but it does validate.</p>
</div>
<div id="footer">
<p>Shirley<br>
<img src="picpopup_files/valid-xhtml11.png" alt="Valid XHTML 1.1!" width="88" height="31"> <img src="picpopup_files/vcss.gif" alt="Valid CSS!" width="88" height="31"></p>
</div>
</body></html>
No comments yet.