经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3 实现的缩略图悬停效果_css3_CSS
来源:jb51  时间:2020/12/14 17:00:43  对本文有异议

实现效果

实现代码

html

  1. <header>
  2. <h1>Thumbnail Hover Effect with <em>CSS3</em></h1>
  3. </header>
  4. <div class="wrapper">
  5. <div class="gallery">
  6. <ul>
  7. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"></li>
  8. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png"></li>
  9. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png"></li>
  10. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png"></li>
  11. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png"></li>
  12. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png"></li>
  13. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png"></li>
  14. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png"></li>
  15. <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png"></li>
  16. </ul>
  17. </div>
  18. <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>
  19. </div>

css3

  1. @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);
  2.  
  3. html, body, div, span, applet, object, iframe,
  4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  5. a, abbr, acronym, address, big, cite, code,
  6. del, dfn, em, img, ins, kbd, q, s, samp,
  7. small, strike, strong, sub, sup, tt, var,
  8. b, u, i, center,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td,
  12. article, aside, canvas, details, embed,
  13. figure, figcaption, footer, header, hgroup,
  14. menu, nav, output, ruby, section, summary,
  15. time, mark, audio, video {
  16. margin: 0;
  17. padding: 0;
  18. border: 0;
  19. font-size: 100%;
  20. font: inherit;
  21. vertical-align: baseline;
  22. }
  23.  
  24. body {
  25. background-color: #f2f2f2;
  26. }
  27.  
  28. header {
  29. width: 100%;
  30. background-color: #77cdb4;
  31. text-align: center;
  32. }
  33.  
  34. h1 {
  35. font-family: 'Roboto Condensed', sans-serif;
  36. color: #FFF;
  37. font-size: 2.3em;
  38. }
  39.  
  40. em {
  41. color: #232027;
  42. }
  43.  
  44. .wrapper {
  45. width: 40%;
  46. margin: 40px auto;
  47. }
  48.  
  49. div.gallery {
  50. margin-top: 30px;
  51. }
  52.  
  53. div.gallery ul {
  54. list-style-type: none;
  55. margin-left: 35px;
  56. }
  57.  
  58. /* animation */
  59. div.gallery ul li, div.gallery li img {
  60. -webkit-transition: all 0.1s ease-in-out;
  61. -moz-transition: all 0.1s ease-in-out;
  62. -o-transition: all 0.1s ease-in-out;
  63. transition: all 0.1s ease-in-out;
  64. }
  65.  
  66. div.gallery ul li {
  67. position: relative;
  68. float: left;
  69. width: 130px;
  70. height: 130px;
  71. margin: 5px;
  72. padding: 5px;
  73. z-index: 0;
  74. }
  75.  
  76. /* Make sure z-index is higher on hover */
  77. /* Ensure that hover image overlapped the others */
  78. div.gallery ul li:hover {
  79. z-index: 5;
  80. }
  81.  
  82. /* Image is position nicely under li */
  83. div.gallery ul li img {
  84. position: absolute;
  85. left: 0;
  86. top: 0;
  87. border: 1px solid #dddddd;
  88. padding: 5px;
  89. width: 130px;
  90. height: 130px;
  91. background: #f0f0f0;
  92. }
  93.  
  94. div.gallery ul li img:hover {
  95. width: 200px;
  96. height: 200px;
  97. margin-top: -130px;
  98. margin-left: -130px;
  99. top: 65%;
  100. left: 65%;
  101. }
  102.  
  103. p.attribution {
  104. font-family: 'Consolas';
  105. color: #000;
  106. clear: both;
  107. text-align: center;
  108. line-height: 25px;
  109. padding-top: 30px;
  110. }
  111.  
  112. p.attribution a {
  113. color: #4c8d7c;
  114. }
  115.  
  116. /* Responsive hack */
  117. @media only screen and (min-width: 499px) and (max-width: 1212px) {
  118. .wrapper {
  119. width: 500px;
  120. }
  121. }
  122.  
  123. @media only screen and (max-width: 498px) {
  124. .wrapper {
  125. width: 300px;
  126. }
  127.  
  128. div.gallery ul {
  129. list-style-type: none;
  130. margin: 0;
  131. }
  132. }

以上就是CSS3 实现的缩略图悬停效果的详细内容,更多关于CSS3 缩略图悬停的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号