鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字

搜索这个效果的时候,很多人都是用css结合jQuery实现的,其实直接用css也可以实现哦~

效果前:

鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字_第1张图片

效果后:

鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字_第2张图片

代码:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css如何实现鼠标移至图片上显示遮罩层及文字title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .imgbox {
            position: relative;
            width: 220px;
            height: 200px;
            margin: auto;
        }

        .imgbox img {
            width: 220px;
            height: 200px;
            /* 转换速度 */
            transition: transform 0.5s ease;
        }

        .imgbox .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 220px;
            height: 200px;
            background: rgba(44, 44, 44, 0.6);
            color: #ffffff;
            opacity: 0;
            display: flex;
            font-size: 13px;
            /* 转换速度 */
            transition: transform 0.5s ease;
        }

        .mask span {
            margin: auto;
        }

        .imgbox a:hover .mask {
            opacity: 1;
            /* 增加元素的大小*/
            -webkit-transform: scale(1.1, 1.1);
            /* Safari */
            -ms-transform: scale(1.1, 1.1);
            /* IE 9 */
            transform: scale(1.1, 1.1);
        }

        .imgbox:hover img {
            -webkit-transform: scale(1.1, 1.1);
            /* Safari */
            -ms-transform: scale(1.1, 1.1);
            /* IE 9 */
            transform: scale(1.1, 1.1);
        }
    style>

head>

<body>
    <div class="container">
        <div class="imgbox">
            <img src="assets/project1.jpg" />
            <a href="https://blog.csdn.net/Gladys_Huang">
                <div class="mask">
                    <span>测试span>
                div>
            a>
        div>
    div>

body>

html>

你可能感兴趣的:(css)