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

当前位置:主页 > CSS3库 > CSS3动画 > CSS3鼠标hover背景图片缩放动画效果
CSS3鼠标hover背景图片缩放动画效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-09-13
    阅读:
麦子学院
简要教程

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

使用方法

HTML结构

以一个<div>为例,在它上面设置一张背景图片,HTML结构如下:

<div class="hover-zoom" style="background-image: url(img/4.jpg)"></div>
                

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

<div class="hover-zoom" style="background-position: top right;background-image: url(img/4.jpg)"></div>
                
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;
}                  
                
下一篇:没有了

网友评论