CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果

效果预览

点击查看效果

我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果。
想要实现这个效果有两种方法，第一种方法是控制背景图片，第二种方法是控制插入的图片，我们这里介绍第一种控制背景图片的方法。

背景图片放大

将背景图片定位在中间，然后鼠标悬浮时将背景图放大再添加遮罩层，最后添加transition:;过渡效果。
看到这个需求时我首先想到对背景图片进行放大就可以了。
这时候出现了第一个问题，如果单纯控制背景图片大小的话那么放大时的基准点是左上角而不是以图片中心缩放。所以我们需要使用background-position: center;来将背景图片固定在中间，这时候设置鼠标悬浮时背景图片尺寸放大background-size: 120%;就实现了背景图从中心放大的效果。现在添加transition:;过渡效果就完成了。

遮罩层的实现

遮罩层的实现是先使用display: none;将内容隐藏，通过’>'子元素选择器，在鼠标悬浮在图片上时选中遮罩层并将其设置为display: block;显示状态。

HTML结构

<body><div class="banner"><!-- 遮罩层 --><div class="fixed"><div class="banner-btn">点击进入</div></div></div>
</body>

CSS结构

.banner {/* 设置背景图容器的大小 */box-sizing: border-box;width: 200px;height: 200px;background-image: url(./01.jpg);background-size: 100%;/* 固定图片位置 */background-repeat: no-repeat;position: relative;background-position: center;transition: 1.5s;}/* 遮罩层 */.fixed {/* 将遮罩层隐藏 */display: none;width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;background-color: rgba(30,30,30,0.3);}/* 遮罩层中的按钮 */.banner-btn {width: 100px;height: 30px;border: 1px solid #fff;color: #fff;margin: 85px auto 0px auto;text-align: center;line-height: 28px;}.banner:hover {background-size: 125%;}/* 通过子元素选择器在触发.banner:hover时选中遮罩层 */.banner:hover>.fixed {/* 显示 */display: block;}

CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果相关推荐

css 实现鼠标悬浮时等比放大图片,鼠标移出时还原图片
实现思想,将图片外层放一个隐形的div容器,图片小比div容器要小, div容器的大小要大于图片放大的尺寸,css 可要自行调整大小这样当图片放大时,就不会影响页面的其他元素,因为它只在隐形的div容 ...
css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...
纯css实现鼠标悬浮、点击更改元素背景
一.使用方案 css伪类 active:元素被点击时变色,点击后颜色消失 focus:元素被点击后变色,点击后颜色不消失 hover:鼠标悬浮时变色,移除后颜色消失二.代码 template部分代码 ...
为什么在css里使用background-image插入背景图片时，浏览器没有任何反应
在今天写页面的时候遇到一个这样的问题,不知道有没有跟我一样遇到过这样类似的问题"在css里使用background-image插入背景图片时,浏览器没有任何反应"并且css引用语法 ...
html中移动背景图片的位置,jquery根据鼠标位置移动背景图片插件
jquery.backgroundMove.js是一款根据鼠标位置移动背景图片jquery插件.该jquery插件么一根据鼠标的当前位置来移动元素的背景图片,兼容ie8浏览器. 使用方法在页面中引入 ...
html旋转墙壁效果,css3实现照片墙效果，鼠标悬浮时旋转放大并摆正
一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
下载页面的css样式文件引用的背景图片
在加载网页的时候,一般会缓存该网页使用的图片资源. 我们在页面的Sources目录下是能够找网所使用的样式和图片等资源. 那么如何下载某网站中我们需要的图片? 使用360浏览器,使用F12功能,选中网 ...
HTML CSS 的鼠标悬浮，点击的样式
HTML CSS 的鼠标悬浮,点击等样式的编写 (以 a 便签为例子) 当鼠标悬浮时:a:hover <style>a:hover{font-size:19px;color:#000000 ...