CSS的“弹出式”图像浏览器

CSS的”弹出式“图像浏览器

转自Dynamic Drive,纯CSS的,原理就是在a标记里面放两张图片,一张大图,一张小图,正常情况下小图可见,大图隐藏,a:hover就显示大图了

以下是引用片段:
<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>
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" /><br />So real, it’s unreal. or is it?</span></a> 

随机文章:

1、正则表达式+常用实例(入门篇)
https://www.onexin.net/regular-expression-common-instance-startup/

2、PHP clearstatcache() 函数
https://www.onexin.net/php-clearstatcache-function/

3、Discuz!X站内开启视频播放代码
https://www.onexin.net/discuz-x-stations-open-video-player-code/

4、Installing the Google PHP SDK on Linux
https://www.onexin.net/installing-the-google-php-sdk-on-linux/

5、自主创业 网上开店是不错的选择
https://www.onexin.net/%e8%87%aa%e4%b8%bb%e5%88%9b%e4%b8%9a-%e7%bd%91%e4%b8%8a%e5%bc%80%e5%ba%97%e6%98%af%e4%b8%8d%e9%94%99%e7%9a%84%e9%80%89%e6%8b%a9/

转载请注明出处:https://www.onexin.net/css%e7%9a%84%e2%80%9c%e5%bc%b9%e5%87%ba%e5%bc%8f%e2%80%9d%e5%9b%be%e5%83%8f%e6%b5%8f%e8%a7%88%e5%99%a8/

Leave a Reply

Your email address will not be published. Required fields are marked *