Ответы пользователя по тегу HTML
  • Как сделать смену содержимого блока при наведении мышкой?

    @KCT
    <!DOCTYPE html>
    <html>
    <head>
        <style>
    .block, .front, .back {
        width: 150px;
        height: 150px;
    }
    .block{
        box-shadow: 0 0 5px rgba(0, 0, 0, .4);
        margin: 15px;
    }
    .front{
        background: green;
        transition: all .7s;
        position: absolute;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .back{
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        background: red;
        transition: all .7s;
        opacity: 0;
    }
    .block > div:hover .front{
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    
    }
    .block > div:hover .back{
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 1;
    }
    
        </style>
    </head>
    <body>
    
    <div class="block">
    <div>
            <div class="front">front</div>
            <div class="back">back</div>
     </div>
    </div>
    </body>
    </html>
    Ответ написан
    Комментировать