[CSS] Scale on Hover with Transition

效果

源码

<!doctype html><html class="outline color"><head><meta charset="utf-8"><title>图片scale动画</title><style>.img-box {position: relative;width: 740px;height: 420px;overflow: hidden;}/* 彩色图片缩放动画 */.img-box>.image-scale {position: absolute;width: 900px;height: 580px;top: -80px;left: -80px;background-size: cover;transition: all 0.5s ease-in-out;}.img-box:hover>.image-scale {transform: scale(0.822);}</style></head><body><div class="img-box"><div class="image-scale" style="background-image: url(./images/1.jpg);"></div></div></body></html>

img-box: 装图片的盒子,确保子元素超出部分隐藏起来.

image-scale: 绝对定位,并手动设置图片居中.

素材

[CSS] Scale on Hover with Transition相关推荐

css鼠标图片hover移入移出缓慢放大缩小
css鼠标图片hover移入移出缓慢放大缩小 /* transition 别放hover里,放到img里,这样移入移出一样缓慢,不然只对hover移上去有缓慢效果 */.image{width: 10 ...
[css] 如何阻止:hover、:active等鼠标行为状态的触发？
[css] 如何阻止:hover.:active等鼠标行为状态的触发? css属性:pointer-events: none;应用避免重复提交---按钮点击后即增加该属性使其不链接不可跳转-- ...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...
html 图片使用scale,CSS scale()用法及代码示例
scale()函数是一个内置函数,用于在2D平面中调整元素的大小.它在水平和垂直方向上缩放元素. 用法: scale( sx ) 或者 scale( sx, sy ) 参数: sx:它将在水平面中调整 ...
鼠标的移入、移出事件与css中的hover伪类
开发工具与关键技术:html+css+js 作者: 李伙撰写时间: 2019年1月19日鼠标的移入.移出事件是一个模仿悬停事件(鼠标移入到一个对象上以及移出这个对象)的方法,当鼠标移动到一个匹配的 ...
css 右上角翻开动画_CSS3 transition动画、transform变换、animation动画
一.CSS3 transition动画 transition可以实现动态效果,实际上是一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性参数: 1.transition-propert ...
[css] scale
scale 原文链接:scale 这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览 ...
利用CSS中的transform、transition等动画效果制作拍立得卡片效果
首先我们要知道拍立得的版型样式即图片+留白先点击右侧演示网页演示效果版型样式为一个大盒子装一个小盒子图片和文字.CSS里面要记得图片和文字分别水平居中,用text-align,还有hov ...
html5 图片hover,关于html5:两种纯CSS方式实现hover图片popout弹出效果
实现原理次要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素应用伪元素 figure::before 示意, 前景元素应用 figure img 示意,当鼠标hover悬浮至figur ...

[CSS] Scale on Hover with Transition

[CSS] Scale on Hover with Transition相关推荐

最新文章

热门文章