纯css hover放大图片

记录自己在工作中遇到的一些比较有意义的，值得去记一记的知识。

这次主要做的是css的hover效果，在所有的效果里，选择了放大，这个也是设计的要求，就做了这个

其实这个要求来说，很简单，主要使用的是css3中的tranform效果里的scale().2D转换。

html 代码如下：

<div> <img src="1.jpg" /> </div>

hover效果css代码:

div {width: 555px;height: 489px;border: #000 solid 1px;margin: 50px auto;overflow: hidden;
}
div img {cursor: pointer;transition: all 0.6s;
}
div img:hover {transform: scale(1.4);
}

属性解释

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍

不过这个transform 的属性只支持到ie9，如果是ie9一下的小伙伴，使用这个，就没有效果了（我很讨厌ie低版本，满满的都是泪）

纯css hover放大图片相关推荐

html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
纯css实现正方体图片旋转效果
纯css实现正方体图片旋转效果目标效果基本思路代码实现主要困难注意:(该代码暂未解决兼容性问题,在google浏览器中可顺利运行) 目标效果鼠标移入之后,图片开始依次旋转平移,旋转平移完成 ...
纯css实现给图片加标签
纯css实现给图片加标签原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播发布时间:2020-07-29 10:23:33 来源:亿速云阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
html 实现格子效果图,纯CSS实现动态图片的九宫格布局
起因最近碰到这样一个需求,要实现一个"九宫格图片"展示,设计师给过来的稿子是酱的是的,九宫格对应的是九种样式. 天不怕,地不怕,就怕设计有想法. 当一看到这样的需求,很多人的第 ...
纯css hover实现效果,纯CSS鼠标hover实现背景扇动效果
纯CSS鼠标hover实现背景扇动效果 .la-btn { padding:14px 20px; background:#1abc9c; color:#fff; font-size:14px; ove ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
html页面校园美景相框,纯CSS+HTML打造图片相框背景
通过纯html+css打造相框效果: 这是在页面上的效果传统的做法是使用背景图片的方式进行,下面是另类方法,亲测,兼容性还是很不错的: HTML代码: CSS部分: *{margin:0px;pad ...
css hover触发图片切换
今天弄一个图片切换,出了一些错误,网上也找了一下解决方法,所以来记录一下. 先看我简单写的css图片切换,然后再讲要注意的地方. <!DOCTYPE html> <html lang ...

纯css hover放大图片

纯css hover放大图片相关推荐

最新文章

热门文章