移入鼠标时图片换成字

2222

//css代码
           .box {
            width: 620px;
            height: 480px;
            /* border: 1px solid red; */
            margin-top: 100px;
            margin-left: 450px;
            /* transform-style: preserve-3d; */
           }
           .box1 {
            width: 150px;
            height: 150px;
            float: left;
            /* transform: rotateY(90deg); */
            transform-style: preserve-3d;
            position: relative;
            margin-top: 5px;
            margin-left: 5px;
            /* animation-name: donghua;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite; */
           }
         
           img {
            width: 150px;
            height: 150px;
           }
           .div {
            position: absolute;
            transform: translateZ(75px);
           } 
           .pic {
              font-size: 28px;
              width: 150px;
              height: 150px;
              color: mediumorchid;
              background-color: lightpink;
              transform: translateX(-75px) rotateY(-90deg);
              position: absolute;
              text-align: center;
              line-height: 150px;
           }
           .box1:hover {
            transform: rotateY(90deg);
            transition: all 2s;
           }
//html代码
       <div class="box">
            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic1.png" alt="">
                </div>
                
                <div class="pic">我♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic2.png" alt="">
                </div>
                
                <div class="pic">好♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic3.png" alt="">
                </div>
                
                <div class="pic">喜♥</div>
            </div>


            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic4.png" alt="">
                </div>
                
                <div class="pic">欢♥</div>
            </div>
            
            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic2-1.png" alt="">
                </div>
                
                <div class="pic">在♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic2-2.png" alt="">
                </div>
                
                <div class="pic">我♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic2-3.png" alt="">
                </div>
                
                <div class="pic">跟♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic2-4.png" alt="">               
                 </div>
                <div class="pic">你♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic3-1.png" alt="">
                </div> 
                <div class="pic">一♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic3-2.png" alt="">
                </div>    
                <div class="pic">起♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic3-3.png" alt="">
                </div>
                <div class="pic">好♥</div>
            </div>

            <div class="box1">
                <div class="div">
                    <img class="pic1" src="./images/img/pic3-4.png" alt="">
                </div>
                
                <div class="pic">吗♥</div>
        </div>