鼠标划过图片进行缩放效果

例码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box{width: 800px;height: 500px;background: #ccc;margin: 50px auto;}.imgBox{width: 140px;height: 100px;background: orange;border: 5px solid pink;float: left;margin: 5px;position: relative;}.imgBox img{height: 100px;width: 140px;}.imgBox:hover img{width: 210px;height: 150px;position: absolute;left: -35px;top: -25;z-index: 1;}</style></head><body><div id="box"><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div><div class="imgBox"><img src="img/1.jpg" /></div></div></body>
</html>

小知识：子元素相对父元素，垂直居中（利用定位）

例码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box{height: 800px;width: 800px;background: orange;position: relative;}#box1{width: 500px;height: 500px;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: #CCCCCC;position: absolute;}</style></head><body><div id="box"><div id="box1"></div></div></body>
</html>

鼠标划过图片进行缩放效果相关推荐

html怎么鼠标经过添加蒙版遮罩,js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 mask .pic{ width:300px; height:250px; background:url(i ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
html鼠标划到图片位置变大
以上是鼠标划到图片位置,进行放
iOS transform解决连续多次旋转缩放，实现图片旋转缩放效果
一.需求实现imageView的缩放旋转效果,一般有两种方式: 1.底层加scrollview,利用scrollview的属性实现.(推荐这种,这是我比较后发现的,手势做缩放旋转会有点弊端) 2.利 ...
html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果. 在我们的demo中,图片在鼠标滑过的时候被折叠,空出来的部分将显示图片的一些信息.我们将创建一个放置图 ...
html鼠标拖尾效果,JavaScript鼠标划过背景拖尾效果
JavaScript鼠标划过残影效果 body{ margin:0px; padding:0px; background-color:#000; } .container a{ display:inl ...
html鼠标移上去变色放大,CSS3 鼠标滑过图片突出放大效果 | 腾讯云
今天给大家分享一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示的图片中,这样可以将鼠标移到图片上进行快速预览图片.同时你也可以在此基础上扩展它,比如给图片加投影和边 ...
鼠标划过表格行变色效果JS
 <script type="text/javascript"> /* 当鼠标移到表格上是,当前一行 ...

鼠标划过图片进行缩放效果

鼠标划过图片进行缩放效果相关推荐

最新文章

热门文章