html缩放动画效果,CSS3鼠标hover背景图片缩放动画效果

这是一款CSS3鼠标hover背景图片缩放动画效果。该特效是在鼠标hover背景图片时，将背景图片平滑放大。鼠标离开时，背景图片恢复为原来的大小。

使用方法

HTML结构

以一个

为例，在它上面设置一张背景图片，HTML结构如下：

上面的默认是从中心开始缩放图片。你也可以设置为以其它原点作为背景图片缩放的中心点，例如以背景图片的右上角为缩放中心点：

CSS样式

背景图片的缩放通过CSS3 background-size属性来实现。核心CSS代码如下：

.hover-zoom {

float: left;

margin: 0;

height: 180px;

width: 300px;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

background-size: 110%;

background-position: center;

background-repeat: no-repeat;

background-color: gray;

position: relative;

}

.hover-zoom:hover {

background-size: 100%;

}

.hover-zoom p {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

color: white;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

background: rgba(0, 0, 0, 0.4);

padding: 0.5em;

margin: 0;

box-sizing: border-box;

}