CSS hover jitter only on vertical mouseup - html

Question

I've consulted these similar questions, 1, 2, 3, 4, but couldn't find the solution to my problem.
I have a simple play button and semi-transparent div transition when hovering over a block-level link which is placed over an image.
The problem is that the divs jitter when moving the mouse vertically over the image.
There are two exceptions to this behavior (in which case, the transition and div behavior run smoothly):
Moving the cursor vertically and parallel to
<span class="play">
and moving the mouse horizontally across the div.
/*------- Media Play Button -------*/
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb a:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
/*------- End Media Play Button -------*/
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay">
</div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>
Unlike the similar questions mentioned above nothing here is changing size and the issue occurs across all browsers. What am I doing wrong?

Answer 1

The reason you're seeing the flickering is because of the selector .vThumb a:hover ~ .vOverlay.
You are only applying styling to the .vOverlay element when hovering over the previous a element. When the .vOverlay element appears, it is positioned over the a element (which means that you are no longer hovering over the a element), resulting in it disappearing and repeating again.
You can easily prevent this by applying the styling when hovering over .vOverlay as well (rather than only applying it when hovering over the a element).
In other words, you want the following:
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
/* ... */
}
However, that will result in the play button not being visible (since you are no longer hovering over the a element either).
You can resolve this by changing the selector .vThumb a:hover .play to .vThumb:hover .play.
Updated Example:
.vThumb {
position: relative;
width: 100%;
height: auto;
font-size: 0;
}
.vThumb img {
position: relative;
width: 100%;
display: block;
z-index: -1;
opacity: .5;
}
.vThumb a {
position: absolute;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.vThumb a .play,
.vThumb a .vOverlay {
opacity: 0;
}
.vThumb:hover .play {
position: relative;
font-size: 14vw;
color: #f00;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
opacity: .95;
border: none;
display: block;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #f00;
opacity: .3;
z-index: 1000;
display: inline-block;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
<div class="vThumb">
<a href="#">
<span class="play">►</span>
</a>
<div class="vOverlay"></div>
<img src="http://i.imgur.com/wZzgmVt.jpg">
</div>