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

来源:https://www.sucaihuo.com/js/3118.html 2017-09-30 11:19浏览(1631) 收藏

一款纯CSS鼠标悬停图片放大的特效,鼠标悬停在每一张图片上的时候,图片自动放大显示,鼠标离开图片区域时,图片恢复原来的缩略图状态。
纯CSS鼠标悬停图片放大的特效
分类:图片代码 > 鼠标滑过 难易:初级
查看演示 下载资源 下载积分: 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>
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 板凳
    10-13 15:16
    s***e
    尽然只是初级
  • 头像 椅子
    10-13 08:42
    1***1
    特效挺好。
  • 头像 沙发
    10-08 07:52
    t***e
    值得学习
1 2