Home > Article > Web Front-end > Through CSS3, achieve element coverage effect_html/css_WEB-ITnose
Through CSS3, achieve element coverage effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:111271browse
In many websites, we can see this effect. When the user enters an element with the mouse, there will be a floating mask layer animation below, as shown in the picture:
Today we will use hover pseudo-class plus css3 to implement without using any JS
<!DOCTYPE html><html><head lang="zh-cmn-Hans"> <meta charset="UTF-8"> <title></title> <style> #d1{ height: 100px; position: relative; width: 100px; overflow: hidden; } #d1:hover > #d3{ transition: transform 0.5s ease; transform: translateY(-100%); } #d2{ background: red; height: 100px; width: 100px; } #d3{ color: white; background: #111; height: 100px; opacity: 0.6; width: 100px; } </style></head><body> <div id="d1"> <div id="d2"></div> <div id="d3"></div> </div></body></html> Click here for the effect
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn