CODEWITHSUNDEEP
css
Maxence
Maxence

Reputation: 2339

Enlarging border is changing the size of child element

I am trying to create an animation on hover of profile pics.

Basically a parent div has rounded corners so that the image look like a circle. When hovering it a border is increased from 0px to 7px.The problem is that the image located inside the child div is shrinking because I have set it's width to 100%.

I can't set a fixed width for the image because the image has to fill the div wether it is big or small.

Is there a way to fix this ? 

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 0px solid rgba(255, 255, 255, 0.4);
}

.element:hover {
  transition: all 0.4s;
  box-shadow: 12px 12px 25px 0px rgba(0, 0, 0, 0.20);
  border: 7px solid rgba(255, 255, 255, 0.4);
}

.element img {
  width: 100%;
}
<div class="element">
  <a href="action"><img src="//myapp.s3-eu-west-1.amazonaws.com/image" alt="alt" /></a>
</div>

Upvotes: 0

Views: 42

Answers (1)

Huangism
Huangism

Reputation: 16448

Here is an example of what you could to accomplish what you want. I removed some irrelevant styles to make it simpler.

Instead of using element's border, you just need to create another border inside of the element and use it to animate the hover, this way your image will not be small to begin with and won't change size when you hover

https://jsfiddle.net/py04y4x1/2/

.element {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 0px solid transparent;
}

.element:hover .border {
  transition: all 0.4s;
  border: 7px solid red;
}

.element img {
  width: 100%;
}

.border {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 7px solid transparent;
  border-radius: 50%;
}

HTML

<div class="element">
  <div class="border"></div>
  <a href="action"><img src="https://lh3.googleusercontent.com/VT-PqxMMsA2wPy7kzmuKGDIzaA3AGuXKExqnfOfwTEy5AvLIMTranbfNGheRr457RD4=w300" alt="alt" /></a>
</div>

Upvotes: 1

Related Questions