Untitled

<!DOCTYPE html> 
<html>
    <head> 
        <meta charset="UTF-8">
        <title>books</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="books">
            <div class="book1">
                <div class="book1_indicator">
                    <div class="book1_label">1</div>
                    <div class="book1_indicator-h"></div>
                    <div class="book1_indicator-d"></div>
                </div>
                <div class="book1_object"></div>
                <div class="text1">
                    <p>текст текст текст текст текст текст текст текст текст текст текст текст</p>                
                </div>
            </div>

            <div class="book2">
                <div class="book2_indicator">
                    <div class="book2_label">2</div>
                    <div class="book2_indicator-h"></div>
                    <div class="book2_indicator-d"></div>
                </div>
                <div class="book2_object"></div>
                <div class="text2">
                    <p>текст текст текст текст текст текст текст текст текст текст текст текст</p>
                </div>
            </div> 

            <div class="book3">
                <div class="book3_indicator">
                    <div class="book3_label">3</div>
                    <div class="book3_indicator-h"></div>
                    <div class="book3_indicator-d"></div>
                </div>
                <div class="book3_object"></div>
                <div class="text3">
                    <p>текст текст текст текст текст текст текст текст текст текст текст текст</p>
                </div>
            </div>
        </div>
    </body>
</html>

body{
    width: 1440px;
}

.book1_indicator, .book2_indicator, .book3_indicator{
    position: absolute;
    margin-top: -50px;
}

.book1_indicator-h, .book2_indicator-h, .book3_indicator-h{
    width: 100px;
    border: 2px solid black;
}

.book1_indicator-d, .book3_indicator-d{
    margin-top: 33px;
    margin-left: 87px;
    rotate: 45deg;
    width: 100px;
    border: 2px solid black;
}

.book2_indicator-d{
    margin-top: 33px;
    margin-left: 413px;
    rotate: -45deg;
    width: 100px;
    border: 2px solid black;
}

.book2_indicator-h{
    margin-left:500px;
}

.book2_label{
    margin-left: 590px;
}

.book1_object, .book2_object, .book3_object{
    margin: 0 auto;
    width: 300px;
    height: 100px;
    border: 2px solid black;
}

.text1, .text2, .text3{
    opacity: 0;
    padding-left: 10px;
    margin-top: -330px;
    position: absolute;
    width: 100px;
}

.text2{
    margin-left: 500px;
}

.books:not(:hover) .text1,.text2,.text3{
    transition: 2s;
    opacity: 0;
}

.books:hover .text1,.text2,.text3{
    transition: 2s;
    opacity: 1;
    margin-top: -130px;
}

.books{
    padding-top: 100px;
    width: 600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.books:hover{
    transition: 2s;
    gap: 100px;
}

.books:not(:hover){
    transition: 2s;
    gap: 0px;
}
Editor is loading...