CSS code for profile pictures?

BySternenstaub484

Does anyone know what's wrong with this code, since it doesn't work! It's supposed to round the edges of the profile picture when you hover over it with the mouse.

the code is: /* Basic styling for the profile picture */

.profile-container {

display: inline-block;

overflow: hidden; /* Prevents the image from extending beyond the container */

}

.profile-img {

width: 100px; /* Default profile picture size */

height: 100px;

object-fit: cover; /* Scale the image to fill the entire container */

border-radius: 10px; /* Initially slightly rounded corners */

transition: border-radius 0.3s ease, transform 0.3s ease; /* Smooth transition for the hover effect */

}

/* Effect on hover */

.profile-img:hover {

border-radius: 50%; /* Fully rounded corners on hover */

transform: scale(1.05); /* Slightly enlarge the image */

}

(1 votes)
Loading...

Similar Posts

Which would make more sense: a dual degree in computer science or training as an IT specialist?

ByYahya528

Hello Could someone please give me some advice, I would be very grateful 🙂 I will leave school with a Realschule certificate (Gymnasium School) Would it be better to continue with FOS and then, after completing your vocational high school diploma, do a dual study course in computer science or do an apprenticeship as an…

Subscribe
Notify of
2 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
medmonk
medmonk
4 months ago

If you’re over transform if you want to change something, it makes sense to set the normal state beforehand. I would also overflow: hidden to be able to store other elements such as a menu.

Set the width of the profile image by the parent container and apply the scaling during hovern. The parent container gets no appearance at all and only the image gets border radius is assigned.

You have given the image a fixed height and width and that would rather apply to the parent container. Instead, the image gets only a width of 100% and with aspect-ratio a side ratio of 1 to 1.

HTML:

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;
    }
  }
}
1
slaxxer
slaxxer
4 months ago

code declaration seems to be in order, rounding takes place in the did with the border radius which contains 1-4 parameters (top left, top right, bottom left, bottom right) , please add a picture to what it looks like.

0