The html snippet I'm working with includes:
<div class="project">
<h3 class="black product">Dash</h3>
<a href="#" class="black hide">view project</a>
</div>
<div class="project">
<h3 class="black product">5/3/1</h3>
<a href="#" class="black hide">view project</a>
</div>
As for the css code, it looks like this:
.hide {
display: none;
}
div.project:hover h3{
line-height: 200px;
}
div.project:hover .hide {
display: inline-block;
}
div.project {
display: inline-block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
border: 2px solid #222;
margin: 0px 20px 20px 20px;
}
h3.product { font-size: 24px; line-height: 300px;}
These code snippets result in two side-by-side div buttons. Upon hovering over each div, the product title shifts up and the "view product" text is revealed.
However, I've noticed that when quickly hovering between the two divs, they start to "jitter" up and down, and remain in that jittered state. This issue seems to occur in Safari, but not in Chrome.
For further clarification, you can check out my jsfiddle here.
This is my first time seeking assistance on this matter, so any specific guidance would be greatly appreciated. Thank you in advance!