一款纯CSS鼠标悬停图片放大的特效,鼠标悬停在每一张图片上的时候,图片自动放大显示,鼠标离开图片区域时,图片恢复原来的缩略图状态。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791