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

夜0黑0黑

夜0黑0黑

2016-02-19 20:25

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的CSS的“弹出式”图像浏览器,手机电脑控们准备好了吗?一起看过来吧!

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

以下是引用片段:
style type="text/css"

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

.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" /spanimg 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" /spanimg src=http://www.dynamicdrive.com/cssexamples/media/ocean.jpg /br /So real, it's unreal. Or is it?/span/a

展开更多 50%)
分享

猜你喜欢

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

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

浏览器CSS兼容方案

Web开发
浏览器CSS兼容方案

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

自动关闭弹出式窗口

电脑网络
自动关闭弹出式窗口

创建弹出式“每日提示”窗口

ASP
创建弹出式“每日提示”窗口

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

浏览器要怎么阻止弹出窗口

浏览器
浏览器要怎么阻止弹出窗口

CSS 浏览器的等宽空格

Web开发
CSS 浏览器的等宽空格

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何降低WPS文档占用空间

如何降低WPS文档占用空间

J2SE综合-关于字符串的一些处理技巧

J2SE综合-关于字符串的一些处理技巧
下拉加载更多内容 ↓