头像

纯CSS鼠标悬停图片放大的特效

来源:http://www.sucaihuo.com/js/3118 richer 2017-09-30 11:19浏览(190) 收藏

一款纯CSS鼠标悬停图片放大的特效,鼠标悬停在每一张图片上的时候,图片自动放大显示,鼠标离开图片区域时,图片恢复原来的缩略图状态。
纯CSS鼠标悬停图片放大的特效
分类:图片代码 > 鼠标滑过 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 8 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,在不同的div容器里放入不同的图片,代码如下:

<h1 class="heading">畅游世界</h1>
<div class="card-container">
 <div class="card" style="--image: url('http://www.sucaihuo.com/jquery/31/3118/demo/images/berlin.jpg'); --angle: -5deg; --x: 5%; --y: 15%; --caption: '2009年,柏林'"></div>
 <div class="card" style="--image: url('http://www.sucaihuo.com/jquery/31/3118/demo/images/london.jpg'); --angle: -1deg; --x: -10%; --y: -20%; --caption: '2001年,伦敦'"></div>
 <div class="card" style="--image: url('http://www.sucaihuo.com/jquery/31/3118/demo/images/los-angeles.jpg'); --angle: -4deg; --x: -20%; --y: 5%; --caption: '2004年,洛杉矶'"></div>
 <div class="card" style="--image: url('http://www.sucaihuo.com/jquery/31/3118/demo/images/italy.jpg'); --angle: 7deg; --x: 10%; --y: -7%; --caption: '1999年,威尼斯'"></div>
</div>
评论11
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 10楼
    10-17 12:48
    十九大
    不错,可以借鉴
  • 头像 9楼
    10-13 15:16
    summerlee
    尽然只是初级
  • 头像 8楼
    10-13 08:42
    1140324011
    特效挺好。
  • 头像 7楼
    10-10 13:51
    holy0573
    不错,特效很好
  • 头像 6楼
    10-08 07:52
    tumike
    值得学习
  • 头像 5楼
    10-07 09:20
    a51821064
    不错,特效很好看!
  • 头像 4楼
    10-05 20:48
    新来的,给我去买包辣条来
    不错,特效很好看
  • 头像 3楼
    10-05 10:14
    nbspnbsp
    收藏收藏,攒积分中。
  • 头像 板凳
    10-02 09:51
    gitXiaoQing
    效果不错,参考下,谢谢分享!
  • 头像 椅子
    10-01 09:25
    a51821064
    不错的效果啊 !
1 2