1.项目介绍
通过简单html知识以及css知识，使之达到，鼠标悬停，图片从灰色过渡到本色。
2.成品展示
result
3.代码块
A：HTML代码
<body> <div class="image"> <img src="./img/01.jpg" > </div> <div class="image"> <img src="./img/02.jpg" > </div> <div class="image"> <img src="./img/03.jpg" > </div> </body>B：css代码
body{ margin: 0; padding: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #333; } .image{ width: 360px; overflow: hidden; cursor: pointer; position: relative; margin: 0 auto; } .image img{ width: 100%; } .image::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; filter: grayscale(100%); transition:.5s linear ; } .image:hover::before{ width: 0; } .image:nth-child(1)::before{ background-image: url(img/01.jpg); } .image:nth-child(2)::before{ background-image: url(img/02.jpg); } .image:nth-child(3)::before{ background-image: url(img/03.jpg); }