头像

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

来源:http://www.sucaihuo.com/js/3118 素材火管理员 2017-09-30 11:19浏览(379) 收藏

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

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

查看演示 下载资源: 14 下载资源 下载积分: 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>
评论10
头像

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

1 2