弹出式图片预览代码,Css代码库,德仔网

代码语言

代码分类

【Css】弹出式图片预览

作者:泳臻 / 发布于2015/11/12/ 514


	<html>
	<head>
	<title>css制作的弹出式图片预览效果</title>
	<style type="text/css">

	.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 */

	}

	</style>
	</head>
	<body>
	<a class="thumbnail" href="#thumb"><img src="http://www.daimajiayuan.com/images/s1.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.daimajiayuan.com/images/1.jpg" />Simply beautiful.</span></a>

	<a class="thumbnail" href="#thumb"><img src="http://www.daimajiayuan.com/images/s2.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.daimajiayuan.com/images/2.jpg" />So real, it's unreal. Or is it?</span></a>
	</body>
	</html>

	<p align="center">本特效由 <a href="http://www.daimajiayuan.com" target="_blank">代码家园</a>丨 收集于互联网，只为兴趣与学习交流，不作商业用途。

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　图片预览　

同语言下

可能有用的

泳臻贡献的其它代码(24)