CSS3 实现的缩略图悬停效果
发布时间:2020-12-09 17:02:06 作者:Aysha Anggraini 我要评论
这篇文章主要介绍了CSS3 实现的缩略图悬停效果的示例代码帮助大家更好的理解和使用CSS3,感兴趣的朋友可以了解下
实现效果
实现代码
html
<header> <h1>Thumbnail Hover Effect with <em>CSS3</em></h1> </header> <div class="wrapper"> <div class="gallery"> <ul> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png"></li> <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png"></li> </ul> </div> <p class="attribution">Images featured in this demo are the works of <a href="https://d.hatena.ne.jp/koochinko">Mernan Behairi</a>. Inspired by an old post of <a href="https://twitter.com/SohTanaka">@Sohtanaka</a>. It originally uses jQuery. Access original <a href="https://web.archive.org/web/20110323065449/http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/">tutorial</a> and <a href="https://web.archive.org/web/20110323065952/http://www.sohtanaka.com/web-design/examples/image-zoom/">demo</a>.</p> </div>
css3
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body { background-color: #f2f2f2; } header { width: 100%; background-color: #77cdb4; text-align: center; } h1 { font-family: 'Roboto Condensed', sans-serif; color: #FFF; font-size: 2.3em; } em { color: #232027; } .wrapper { width: 40%; margin: 40px auto; } div.gallery { margin-top: 30px; } div.gallery ul { list-style-type: none; margin-left: 35px; } /* animation */ div.gallery ul li, div.gallery li img { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } div.gallery ul li { position: relative; float: left; width: 130px; height: 130px; margin: 5px; padding: 5px; z-index: 0; } /* Make sure z-index is higher on hover */ /* Ensure that hover image overlapped the others */ div.gallery ul li:hover { z-index: 5; } /* Image is position nicely under li */ div.gallery ul li img { position: absolute; left: 0; top: 0; border: 1px solid #dddddd; padding: 5px; width: 130px; height: 130px; background: #f0f0f0; } div.gallery ul li img:hover { width: 200px; height: 200px; margin-top: -130px; margin-left: -130px; top: 65%; left: 65%; } p.attribution { font-family: 'Consolas'; color: #000; clear: both; text-align: center; line-height: 25px; padding-top: 30px; } p.attribution a { color: #4c8d7c; } /* Responsive hack */ @media only screen and (min-width: 499px) and (max-width: 1212px) { .wrapper { width: 500px; } } @media only screen and (max-width: 498px) { .wrapper { width: 300px; } div.gallery ul { list-style-type: none; margin: 0; } }
以上就是CSS3 实现的缩略图悬停效果的详细内容,更多关于CSS3 缩略图悬停的资料请关注脚本之家其它相关文章!
相关文章
- JS+CSS3透明的霜雾玻璃图片预览特效是一款图片模糊显示,鼠标悬停圆形的霜雾玻璃镜预览特效。2020-11-26
- CSS3几何透明层文本悬停变色特效代码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容特效代码。2020-11-25
- CSS3鼠标悬停按钮阴影缩放特效代码是一款红色简洁的方形按钮,鼠标悬停按钮突出放大阴影效果,非常漂亮。2020-11-18
- CSS3悬停展开旋转菜单特效代码是一款鼠标移动到头像上就会展开旋转菜单特效。2020-11-16
- CSS3新拟态图标悬停动画特效代码是一款扁平简洁的新拟态快捷图标导航,鼠标悬停图标按钮动画特效。2020-11-13
- 一款简单的css3响应式图文卡片布局,鼠标悬停图片遮罩显示文字内容特效,喜欢的朋友快来下载吧2021-01-20
最新评论