CSS3鼠标悬停图片显示遮罩特效

最新推荐文章于 2024-05-30 16:48:43 发布

苇草--May

最新推荐文章于 2024-05-30 16:48:43 发布

阅读量4.3k

点赞数 1

分类专栏：网页特效文章标签： css3

本文链接：https://blog.csdn.net/github_38247751/article/details/76268776

版权

这篇博客介绍了如何使用CSS3实现鼠标悬停图片时显示遮罩的特效，主要涉及transform的translateY属性来控制元素上下移动，以及通过调整opacity实现遮罩的透明度变化。此效果适用于多种现代浏览器，但不支持IE8及以下版本。

摘要由CSDN通过智能技术生成

transform:translateY(50px);
transform:translateY(0px);
这两行代码实现了元素从下向上移动
opacity:0;
opacity:0.5;
遮罩是通过透明度实现的

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3鼠标悬停图片显示遮罩特效</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
    .demo{
        padding:2em 0;
    }

    .box{
        text-align:center;
        overflow:hidden;
        position:relative;
    }
    .box:before{
        content:"";
        width:100%;
        height:100%;
        background-color:#000;
        padding:14

最低0.47元/天解锁文章

苇草--May

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3鼠标悬停图片显示遮罩特效

transform:translateY(50px); transform:translateY(0px); 这两行代码实现了元素从下向上移动 opacity:0; opacity:0.5; 遮罩是通过透明度实现的<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Com
复制链接

扫一扫

专栏目录