Heute möchte ich euch einen kreative Weg zeigen wie ihr Informationen in eure Webseiten präsentieren könnt. Entweder könnt ihr ein Schlagwort zeigen oder das ganze auch als Button verwenden.

Video

HTML

<div class="container">
    <div class="card">
        <p><span>Info 1</span></p>
        <p><span>Info 2</span></p>
        <p><span>Info 3</span></p>
    </div>
</div>

CSS

:root {
    --bg:#323232;
    --test: #fff;
    --farbe: #df7300;
}
.card {
    width: 200px;
    height: 250px;
    background: var(--bg);
    border-radius: 5px;
    display: flex;
    gap: 5px;
    
    /*border: 1px solid #fff;*/
}

.card p {
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--farbe);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 500ms;

    flex: 1;
}

.card p:hover{
    flex: 4;

}

.card p span{
    min-width: 14em;
    padding: .5em;
    text-align: center;transform: rotate(-90deg);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--farbe);
    transition: all 500ms;
}

.card p:hover span{
    transform: rotate(0);
}