I want an image to be shown in a circle but when it is hovered on the circle gets bigger until the w-CodePudding

I have this image and I want it to be shown in a small circle and then when hovered on the circle to get bigger and bigger until the whole image is shown. I hope this image helps https://imgur.com/a/gKHtVXr.

CodePudding user response：

You have to put your img element in a container Then apply a object-fit: cover; to your img.

After you just have to apply hover effect on your container to make animation and circle

Thanks to this tuto, before ask questions try to check on google

.circle-image{
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 200px;
  height: 200px;
  transition: all .2s;
}
.circle-image:hover{
  border-radius:0;
}

.circle-image img{
  width:100%;
  height:100%;
  object-fit: cover;
}

<span >
 <img src="https://images.unsplash.com/photo-1657299170237-2d4cd59b5156?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"/>
</span>

CodePudding user response：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .image-container {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                transition-property: border-radius;
                transition-duration: 2s;
            }
      
            .image-container:hover {
                border-radius: 0;
            }
        </style>
    </head>
    <body>
        <img 
             src="https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
             alt="">
    </body>
</html>