html和css实现hover图片上浮效果

目录

1、html代码

2、css代码

 完整代码

效果图：

---

1、html代码

2、css代码

  body{
            background-color: black;
          
        }
        div{
            width: 1000px;
            height: 400px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 100px auto;
            /* border: 3px solid red; */
        }
        span{
            display: inline-block;
            width: 200px;
            height: 250px;
            margin-right: 50px;
            transition: all 0.5s;
        }
        span:nth-child(1){
            background-color: violet;
        }
        span:nth-child(2){
            background-color: lightseagreen;
        }
        span:nth-child(3){
            background-color: orangered;
        }
        span:hover{
            box-shadow: 0px 0px 5px rgba(255, 255, 255,0.2);
            transform: translate3d(0,-4px,0);
            cursor: pointer;
        }

 完整代码

效果图：