Web初学者-作业2-[图片过渡效果]

1.项目介绍

通过简单html知识以及css知识，使之达到，鼠标悬停，图片从灰色过渡到本色。

2.成品展示

3.代码块

A：HTML代码

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); }