Rahul Kashyap Rahul Kashyap - 4 years ago 82
HTML Question

Why background is blinking on hover when I move mouse cursor in DP box

I am trying to create a DP box for the user which is containing a user profile picture in it, where on image hover an edit profile image link will appear, but it is not working. When I hover over on the image it is blinking and the link doesn't appear correctly.

Here is the codepan link click here



@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
}
.dp {
width: 128px;
height: 128px;
margin: 0 auto;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
overflow: hidden;
position: relative;
}
.edit-dp a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 130px;
background-color: rgba(0, 0, 0, .9);
text-align: center;
transition: all .2s ease-in-out;
color: #fff;
font-size: 15px;
text-decoration: none;
display: none;
}
.dp img:hover ~ .edit-dp a {
display: block;
}

<div class="dp">
<img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
<div class="edit-dp">
<a href="#">Edit Image</a>
</div>
</div>




Answer Source

The blinking glitch is because of that :hover effect of display: block on image instead of container div.

Since every time you :hover on the image you ultimately gonna edit it, so instead of display: none you can set it to opacity: 0 and on :hover you can set it to opacity: 1 and by doing this you'll get a nice transition effect too.

Here's the Snippet for a better view:

@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
  font-family: 'Roboto', sans-serif;
  background-color: #eee;
}

.dp {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.52);
  overflow: hidden;
  position: relative;
}

.edit-dp a {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 130px;
  background-color: rgba(0, 0, 0, .9);
  text-align: center;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.dp:hover .edit-dp a {
  opacity: 1;
}
<div class="dp">
  <img src="http://rs618.pbsrc.com/albums/tt265/davejarrett/Avatars/check-in-minion_zps7ee060ac.jpg~c200" alt="" width="128">
  <div class="edit-dp">
    <a href="#">Edit Image</a>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download