CODEWITHSUNDEEP
htmlcssimage
Alex Dan
Alex Dan

Reputation: 51

I want my image to be shown in a circle and when hovered on it gets full

I have tried achieving this effect using border-radius (code below) but I want the circle to be smaller, as shown in this example https://i.sstatic.net/OWo7U.jpg and I don't think I can acheive this with border-radius.

<img class = "zyra-thumb" src = "thumbnail champion/thumb2.png" alt="zyra">
CSS:
.zyra-thumb{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 150px;
    transition: border-radius 0.3s;
}
.zyra-thumb:hover{
    border-radius: 10px;    
}

Upvotes: 1

Views: 90

Answers (3)

jeremy-denis
jeremy-denis

Reputation: 6878

you can use clip-path to display only center of the thumb image and transition: clip-path 1s;to give needed animation on hover

.thumb {
  background: purple;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.zyra-thumb {
  width: 100%;
  object-fit: cover;
  clip-path: circle(25% at 50% 50%);
  transition: clip-path 1s;
  border-radius: 10px;
  
}

.zyra-thumb:hover {
  clip-path: circle(100% at 50% 50%);;
}
<div class="thumb">
  <img class="zyra-thumb" src="https://www.gravatar.com/avatar/0cf65651ae9a3ba2858ef0d0a7dbf900?s=256&d=identicon&r=PG&f=1" alt="zyra">
</div>

Upvotes: 1

DreamTeK
DreamTeK

Reputation: 34187

Based on your attached image I assume this is the effect you are trying to achieve.

.zyra-thumb {
  background: url(https://i.sstatic.net/OR7ho.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  display: inline-block;
  border-radius: 20px;
}

.zyra-thumb::before {
  content: "";
  display: block;
  width: 50%;
  padding-bottom: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: solid 400px #41373f;
  border-radius: 50%;
  transition: all ease-in-out 0.3s;
}

.zyra-thumb:hover::before {
  width: 150%;
  padding-bottom: 150%;
}
<div class="zyra-thumb">
</div>

Upvotes: 1

BroTrustMe
BroTrustMe

Reputation: 13

Simply use border-radius:0px; in hover.

Upvotes: 0

Related Questions