How does CSS achieve the effect of mouse-sliding text?

May 29, 2021 Article blog

In web development, the application of mouse sliding over text suspension is still very wide, and the technical term for this effect becomes "mask layer". F or example, in some e-commerce sites or news sites, you need to add text messages or content to a picture, you will use this effect. So today's w3cschool editor-in-chief will teach you how CSS works by mouse-slip text.

Let's first look at the effect: when the mouse slides over the picture, the text appears, and when the mouse leaves, the text disappears.

How does CSS achieve the effect of mouse-sliding text?1

Ideas:

Styling photos and text content first, and setting the visible text to invisible visibility: hidden Then add hover style.

.photo:hover .text

Specific code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标滑过文字出现 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
		 .photo{
                width: 428px;
                height: 100px;
                overflow: hidden;
                position: relative;
            }
            .photo .text{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0,.4);
                color: white;
                text-align: center;
                visibility: hidden;
            }
            .photo:hover .text{
                visibility: inherit;
            }          
	</style>
</head>
<body>
	 <div class="photo">
            <div><img src="https://7n.w3cschool.cn/statics/img/logo/[email protected]"></div>
            <div class="text">
                <div class="c1"><h1>悬浮文字</h1></div>
            </div>
        </div>
</body>
</html>

That's all CSS does to make mouse-slip text appear. For more CSS effects learning, follow w3cschool.com.

How does CSS achieve the effect of mouse-sliding text?

Cookie Consent