经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
CSS实现小图下拉查看大图和信息的方法_CSS教程_CSS
来源:jb51  时间:2020/12/8 9:19:35  对本文有异议

今天来讲一个淘宝京东等商城里面经常用到的小图hover查看大图和信息的css特效,先来看图片展示:

请添加图片描述

如果可以的话,还可以设置阴影和延迟特效啥的,想看的话可以看之前的几个css特效案例!

请添加图片描述

设计思路也很简单,就是先隐藏下面的大图,然后小图hover的时候显示就好了!详细的注解也在源码里有。

附上源码:

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <title>下拉图片</title>
  6. <meta charset="utf-8">
  7. <style>
  8. body {
  9. text-align: center;
  10. }
  11. .dropdown {
  12. /* position为relative,下面的子元素可以作为参考 */
  13. position: relative;
  14. /* 定义为行内块级元素 */
  15. display: inline-block;
  16. }
  17. .dropdown-content {
  18. /* 不显示该部分内容,包括图片 */
  19. display: none;
  20. /* 绝对定位 */
  21. position: absolute;
  22. background-color: #f9f9f9;
  23. min-width: 160px;
  24. box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  25. }
  26. .dropdown:hover .dropdown-content {
  27. /* 鼠标移上去的时候显示大图 */
  28. display: block;
  29. }
  30. /* 设置下面的备注文字 */
  31. .desc {
  32. padding: 15px;
  33. text-align: center;
  34. }
  35. </style>
  36. </head>
  37.  
  38. <body>
  39.  
  40. <h2>小图片下拉查看大图</h2>
  41. <p>移动鼠标到图片上显示下拉图片和图片信息</p>
  42.  
  43. <div class="dropdown">
  44. <img src="img/1.jpg" alt="cat" width="100" height="66" style="border-radius: 5px;">
  45. <div class="dropdown-content">
  46. <img src="img/1.jpg" alt="cat" width="400" height="260" style="border-radius: 10px;">
  47. <div class="desc">一只可爱的小猫咪!</div>
  48. </div>
  49. </div>
  50.  
  51.  
  52. </body>
  53.  
  54. </html>

到此这篇关于CSS实现小图下拉查看大图和信息的方法的文章就介绍到这了,更多相关CSS小图下拉查看大图内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持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号