Why is it flickering on hover?

Question

I have encountered a problem. I have made a hover transition. When the mouse is moving over the image it flickers between the hovered and unhovered state. When the mouse is still on the image it works how it should. Can someone find the problem please?

.belowcont {
  width: 100%;
  height: 200px;
  border: 1px dashed black;
  margin-top: 2px
}

.circles {
  width: 180px;
  height: 180px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Intersection_of_3_circles_7.svg/1200px-Intersection_of_3_circles_7.svg.png);
  background-size: 100%;
  background-image: no-repeat;
  ;
  border-radius: 50%;
  margin-left: 120px;
  margin-top: 10px;
  float: left;
  margin-left: 120px;
  margin-top: 10px;
  float: left;
}

.circleimg {
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

.circleimg:hover {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: absolute;
  z-index: -100;
  transition: all 1s linear;
}

.circleimg:hover~.circletext {
  visibility: visible;
}

.circletext {
  color: black;
  width: 160px;
  text-align: center;
  margin: 80px auto;
  visibility: hidden;
}

<div class="belowcont">
  <div class="circles">
    <img class="circleimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Intersection_of_3_circles_0.svg/800px-Intersection_of_3_circles_0.svg.png" />
    <p class="circletext"> Multi Award Winning Film </p>
  </div>
  <div class="circles">
    <img class="circleimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Intersection_of_3_circles_3.svg/2146px-Intersection_of_3_circles_3.svg.png" />
    <p class="circletext"> A Story Of Shanes Life </p>
  </div>
  <div class="circles">
    <img class="circleimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Intersection_of_3_circles_7.svg/1200px-Intersection_of_3_circles_7.svg.png" />
    <p class="circletext">Set In The East Midlands </p>
  </div>
</div>

Answer 1

I think it's something to do with the z-index: -100. If you remove that, the flickering goes away. My guess is that there are other elements on top which are making the cursor hover over them instead of the desired element. Is there a reason why you have set the z-index like that? Perhaps you could try changing it's visibility or opacity if you want to hide it.

It's hard to see exactly what you're trying to do as I don't have the images.

.belowcont {
       width:100%;
       height:200px;
       border:1px dashed black;
       margin-top:2px
       }

.circles {
     width:180px;
     height:180px;
     background:url(circles.png);
     background-size:100% ;
     background-image:no-repeat;;
     border-radius:50%;
     margin-left:120px;
     margin-top:10px;
     float:left;
     margin-left:120px;
     margin-top:10px;
     float:left;
     }

.circleimg {
       width:180px;
       height:180px;
       border-radius:50%;
        }

.circleimg:hover {
       width:180px;
       height:180px;
       border-radius:50%;
       position:absolute; // removed z-index here
       transition:all 1s linear;
        }

.circletext {
         position: relative; // needed for z-index
         color:white;
         width:160px;
         text-align:center;
         margin:80px auto; 
         visibility:hidden;
         z-index: 1; // keeps text on top of image
         pointer-events: none; // stops pointer from triggering new hover over the text
}

.circleimg:hover ~ .circletext{
       visibility:visible;
}

Answer 2

Here: http://jsfiddle.net/ctwheels/a2kdqcnt/ I believe the issue was with the position:absolute; and z-index:-100;. Don't quote me on that. In your original code, the hover wasn't "flickering" it was one horizontal line of pixels that was part of the image and one that was not, replicated vertically over the image, as if the browser couldn't decide where it belonged

HTML

<div class="belowcont">
    <div class="circles">
        <img class="circleimg" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg" />
        <p class="circletext">Multi Award Winning Film</p>
    </div>
    <div class="circles">
        <img class="circleimg" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg" />
        <p class="circletext">A Story Of Shanes Life</p>
    </div>
    <div class="circles">
        <img class="circleimg" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg" />
        <p class="circletext">Set In The East Midlands</p>
    </div>
</div>

CSS

.belowcont {
    width:100%;
    height:200px;
    border:1px dashed black;
    margin-top:2px
}
.circles {
    width:180px;
    height:180px;
    border-radius:50%;
    margin-left:120px;
    margin-top:10px;
    float:left;
}
.circleimg {
    width:180px;
    height:180px;
    border-radius:50%;
    position:absolute;
}
.circleimg:hover + .circletext {
    opacity:1;
    transition:opacity 1s;
}
.circletext:hover {
    opacity:1;
    transition:opacity 1s;
}
.circletext {
    color:white;
    width:160px;
    text-align:center;
    margin:80px auto;
    opacity:0;
    position:absolute;
}

Answer 3

I'm unsure as to why exactly it's doing that, however I can offer a different solution which I have never experienced this problem.

Instead of using visibility: visible try setting the default text class to:opacity: 0.

Then on hover:

opacity: 1;
transition: opacity 1s;

I've taken out bits of code that aren't of use and absolutely positioned the text within the image.

It seems much better. Just have a fiddle about with the positioning and you'll be good to go. (Pun intended with the 'Fiddle about')

http://jsfiddle.net/fjgu0s4q/1/

Edit: After a little more thinking as to why it flickered, it seems to be the method of moving the text up over the image on hover. When you're hovering over the image it does a check (Pseudo code)

If mouse move == true then 
   if hovering over element
    // do specified task
   end if
end if

So if you move one pixel it has to check again, and again, so it has to move the text back to its default state on move. Since your method wasn't the most organic way of doing it, that seems to be why it flickered. It was constantly moving the text up and down as it was checking the state of the mouse positioning.

Answer 4

@Jezzabeanz's answer is correct. However add this block to your css to keep the text from disappearing when the mouse hovers over the text

.circletext:hover{
      opacity: 1;
      transition: opacity 1s;

}