hover effect greift nicht?

Hey, der hover effect greift nicht in css

main.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    background-color: #333;
    padding: 20px;
}

main.projects .project {
    background-color: #555;
    color: white;
    padding: 15px;
    border-radius: 8px;
    flex: 1 1 250px;
    max-width: 300px;
    box-sizing: border-box;
    transition: flex-basis 2s;
    flex-basis: 300px; /* Startbreite */
}

main.projects .project:hover {
    flex-basis: 400px; /* Breite bei Hover */
}

main.projects .project h1 {
    font-size: 25px;
}

main.projects .project p {
    font-size: 20px;

} 

Answer 1

[regex9]

Die Pseudoklasse selbst greift durchaus. Du würdest es sehen, wenn du ein anderes Property ändern würdest (z.B. background-color).

Die Wertänderung für flex-basis zeigt keine visuelle Wirkung, da die Größenberechnung der Flexbox-Items durch flex-grow und flex-shrink bestimmt wird. Der Wert von flex-basis ist nur ein Vorschlag, auf dessen Grundlage der Browser austariert. Außerdem hast du doch eine Maximalbreite für die Box vorgegeben, die kleiner ist, als der Zielwert.

Gib dem flex-Shorthand also andere Werte (flex-basis kann aus der Regel raus, der Wert kann schon gleich mit dem Shorthand richtig gesetzt werden)

flex: 0 0 300px;

und überlege dir nochmal, wie du mit max-width verfahren willst. Entweder muss es raus oder du verteilst andere Werte.