高品质外贸建站系统与外贸网站建设服务【tenghoo】

CSS3 实现的缩略图悬停效果?

更新时间:2021-10-23 关键词:网站建设 网站设计 网站制作

实现效果



实现代码


html


Thumbnail Hover Effect with CSS3

 

4a704331e9ef792a684ad450bdf12726

77e546a3836f12ccdbdb1cc7b5fe10ed

11084c342dedbc89a270a25bdee9c872

75623c36b6f91041477e536531f41b7c

925501bb93a178e32e59be254fc4ad76

bf3d57a6061a9522b9b3eb396077dea0

c0417f2f17224d92db91aa1a5b3a88f3

dbbfb006b2978f3ac24b7308a3cd4a54

ef3f95724013036b1e09898bb782ca84

 

Images featured in this demo are the works of Mernan Behairi. Inspired by an old post of @Sohtanaka. It originally uses jQuery. Access original tutorial and demo.


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 缩略图悬停的资料请关注html中文网其它相关文章!



关于我们

广州腾虎网络科技有限公司开发团队——致力于互联网技术服务、开发及应用,为企事业单位提供一站式、完善的整合网络品牌服务。,并专注于对网络品牌、网络策划、设计视觉等方面的探索和研究,保证了策划、开发、设计、方案实施、研究等完善的专业化运作,根据客户具体情况制定系列专业和规范的客户服务和保障体系,为企业提供周到、放心的一站式服务。

立即咨询

广州市天河区福元南路4号达维商务中心2305 Copyright©广州腾虎网络科技有限公司

粤ICP备13073147号  

粤公网安备 44010602001101号      

咨询 联系我们 电话沟通
Top
立即咨询
我们联系您
24小时热线:
400-603-3310

免费提供行业精准推广方案