CODEWITHSUNDEEP
htmlimagecss
Janath
Janath

Reputation: 1248

Add border to image on hover with padding

I just want to add a border for the image with padding also I need transition effect. It's working fine but has a few problems :

  1. it shows little movements in the image on hover(not fixed)
  2. Transitions not smooth.

I tried everything.

I applied box-sizing:border-box; and gave the image a margin of 2px and removed it on hover but still no luck.

See this example. It's perfectly fine and the image is not moving on hover.

Here is my code :

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img {
  border-radius: 50%;
  margin: 2px;
  transition: 0.2s ease-in-out;
}

.home-item1 img:hover {
  border: 2px solid red;
  margin: 0px;
  padding: 2px;
}
<div class="home-item1">
  <img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>

What am I missing? Please check the fiddle and let me know.

jsfiddle

Upvotes: 5

Views: 1134

Answers (4)

Jitendra Ahuja
Jitendra Ahuja

Reputation: 759

I think all you need to do is to boost the transition period and just add border to the image so that the border could be seen for a good time on hover, thus showing a watery like, a bit moving effect to the image. Here it goes : 

    .home-item1 {
      height: 105px;
      width: 105px;
      cursor: pointer;
      box-sizing: border-box;
    }
    
    .home-item1 img{
      border-radius: 60%;
      margin: 2px;
      transition: border 0.6s ease-in-out;
      border: 3px solid transparent;
    }
    
    .home-item1 img:hover{
      border: 2px solid red;
      margin: 0px; 
      padding: 2px; 
    }
   
 

    
<div class="home-item1">
      <img src="http://lorempixel.com/150/150/" alt="">
    </div>

Upvotes: 0

Me1o
Me1o

Reputation: 1629

adding a border will add to the dimensions of the div which causes the movement.. adding color to a transparent border will not, it achieves the same effect.

Upvotes: 0

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you:

I have just added border: 4px solid transparent; and removed the margin and compensated it with the border and on hover reset it. Fiddle

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img{
  border: 4px solid transparent;
  border-radius: 50%;
  padding: 0px;
  transition:all 0.2s ease-in-out;
}

.home-item1 img:hover{
 border: 2px solid red;
 margin: 0px;
 padding: 2px;
}
<div class="home-item1">
  <img src="http://lorempixel.com/110/110/" alt="">
</div>

Hope this was helpfull.

Upvotes: 3

Zuber
Zuber

Reputation: 3473

  • First, You need to add transparent border to image so that it will not move when hovered.
  • Second, Increase the duration of transition to get smooth effect

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img{
  border-radius: 50%;
  margin: 2px;
  transition: border 0.5s ease-in-out;
  border: 2px solid transparent; /* Added */
}

.home-item1 img:hover{
border: 2px solid red;
 margin: 0px; padding: 2px; 
}
<div class="home-item1">
  <img src="http://via.placeholder.com/350x150" alt="">
</div>

Upvotes: 3

Related Questions