纯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>