Задать вопрос

KCT

Ответы пользователя по тегу 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>
    Ответ написан
    Комментировать
    Комментировать