css code für profilbilder?
weiss jemand was an diesem code falsch ist, da er nicht funktioniert! Er soll die Ränder vom Profilbild rund machen, wenn man mit der maus rüber fährt.
der code ist: /* Grundlegendes Styling für das Profilbild */
.profile-container {
display: inline-block;
overflow: hidden; /* Verhindert, dass das Bild über den Container hinausgeht */
}
.profile-img {
width: 100px; /* Standardgröße des Profilbildes */
height: 100px;
object-fit: cover; /* Bild so skalieren, dass es den gesamten Container ausfüllt */
border-radius: 10px; /* Anfangs leicht abgerundete Ecken */
transition: border-radius 0.3s ease, transform 0.3s ease; /* Weicher Übergang für den Hover-Effekt */
}
/* Effekt bei Hover */
.profile-img:hover {
border-radius: 50%; /* Vollständig runde Ecken beim Hover */
transform: scale(1.05); /* Leichtes Vergrößern des Bildes */
}
2 Antworten
Wenn du über transform beim Hovern etwas verändern möchtest, macht es Sinn vorher die Normalzustand festzulegen. Ich würde zudem das overflow: hidden weglassen, um ggf. weitere Elemente wie ein Menü unterbringen zu können.
Die Breite des Profilbildes durch den Parent-Container festlegen und die Skalierung beim Hovern darauf anwenden. Der Parent-Container bekommt überhaupt kein Aussehen und lediglich dem Bild ein border-radius zugewiesen wird.
Du hast ja dem Bild eine fixe Höhe und Breite gegeben und jene eher auf den Parent-Container anwenden würde. Stattdessen bekommt das Bild bloß eine Breite von 100% sowie mit aspect-ratio ein Seitenverhältnis von 1 zu 1.
HTML:
<div class="profile-container">
<img src="./path/image.jpg" alt="">
</div>
CSS:
.profile-container {
--_transition: 0.3s ease;
width: 6.25rem;
height: 6.25rem;
transform: scale(1);
transition: transform var(--_transition);
&:hover {
transform: scale(1.5);
}
& img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 10px;
transition: border-radius var(--_transition);
&:hover {
border-radius: 50vh;
}
}
}
wie siehts denn aus? code deklaration scheint inordnung zu sein, abrundungen erfolgen in der tat mit dem border-radius welcher 1-4 parameter enthält (top left, top right, bottom left, bottom right) , füge am besten bitte noch ein bild hinzu wie es aktuell aussieht.