html/css: Inhalt des animierten flexbox-elements auf hover ändern

Question

Ich habe eine Reihe von vier Boxen mit großen, einzelnen Buchstaben im Inneren, sie sind eingerichtet mit flexbox, um die gesamte Breite der Seite zu überspannen. Die Boxen drehen sich beim Schweben leicht.

Ich mag, den Inhalt einer Box würde auch auf schweben ändern, das heißt die I background-color möchte schwarz verschieben und ein paragraph kleineren Text innerhalb des Kastens angezeigt werden, wenn sie über das entsprechende Feld schwebt. Ich kann es mir nicht vorstellen. Zuerst dachte ich daran, Boxen mit dem gewünschten Aussehen zu verstecken, indem man ihre display: none einstellt und sie dann zu inline ändert, sobald der Benutzer die entsprechende weiße Box schwebt. Allerdings kann ich es nicht schaffen, eine Box richtig zu verstecken, da sie mit dem flexbox zusammenhängt und auch die unsichtbare Box würde nicht richtig rotieren wie ihr weißes Pendant.

Irgendwelche Ideen, wie ich den wechselnden Inhalt und das Aussehen der weißen Kästchen beim Schweben erreichen kann? Hier ist eine jsfiddle der aktuellen Aufstellung der Boxen:

* { 
 
    margin: 0; 
 
    padding: 1px; 
 
    box-sizing: border-box; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.row { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.banner { 
 
    margin: 0px; 
 
    padding: 0; 
 
    font-size: 13rem; 
 
    line-height: 1.2; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    box-sizing: border-box; 
 
    cursor: default; 
 
} 
 

 
.rotate-right { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-left { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-right:hover { 
 
    transform: rotate(5deg); 
 
} 
 

 
.rotate-left:hover { 
 
    transform: rotate(-5deg); 
 
}

<!-- BANNER/TILES ON TOP OF PAGE --> 
 

 
<div class="top" id="top"> 
 
    <div> 
 

 
    <div class="flex row banner"> 
 
     <div class="box rotate-right" id="box1"> 
 
     <p> 
 
      1 
 
     </p> 
 
     </div> 
 

 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      2 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-right"> 
 
     <p> 
 
      3 
 
     </p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      4 
 
     </p> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>

Answer 1

Ist das, was Sie brauchen? Demo ist in Box 1.

* { 
 
    margin: 0; 
 
    padding: 1px; 
 
    box-sizing: border-box; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 

 
.row { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.banner { 
 
    margin: 0px; 
 
    padding: 0; 
 
    font-size: 13rem; 
 
    line-height: 1.2; 
 
} 
 

 
.box { 
 
    flex: 1; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    background-color: white; 
 
    box-sizing: border-box; 
 
    cursor: default; 
 
} 
 

 
.rotate-right { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-left { 
 
    transition: all 400ms ease; 
 
} 
 

 
.rotate-right:hover { 
 
    transform: rotate(5deg); 
 
    background: black; 
 
} 
 

 
.rotate-left:hover { 
 
    transform: rotate(-5deg); 
 
    background: black; 
 
} 
 

 
.text { 
 
    color: white; 
 
    display: none; 
 
    font-size: 4rem; 
 
} 
 

 
.rotate-right:hover p.text, 
 
.rotate-left:hover p.text { 
 
    display: inline-block; 
 
} 
 

 

 
.rotate-right:hover p:not([class="text"]), 
 
.rotate-left:hover p:not([class="text"]) { 
 
    display: none; 
 
}

<!-- BANNER/TILES ON TOP OF PAGE --> 
 

 
<div class="top" id="top"> 
 
    <div> 
 

 
    <div class="flex row banner"> 
 
     <div class="box rotate-right" id="box1"> 
 
     <p> 
 
      1 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 

 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      2 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 

 
     <div class="box rotate-right"> 
 
     <p> 
 
      3 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 

 
     <div class="box rotate-left"> 
 
     <p> 
 
      4 
 
     </p> 
 
     <p class="text">Text</p> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div>

Answer 2

.box:hover {background-color: red;font-size: 25px;}

dieses Versuchen wird es hilfreich sein,