If I understand your issue correctly, you're wanting to control the flicker effect that your fiddle is demonstrating. The short answer is no.
This effect is caused by the way :hover
works, which updates every pixel the mouse moves. You've given the hover effect visibility:hidden
so when you hover on the element it collapses, but now you're no longer hovering over it, so the :hover
no longer applies. This is reflected on the next pixel which shows the full element again.
The solve for this issue is in this fiddle demo
edit You can't control this via CSS, but look below and see if that works for you.
HTML:
<div class="vis-1">
<div>
Lorem Ipsum
</div>
</div>
CSS:
body > div {
height:100px;
width:100px;
margin-bottom: 15px;
}
.vis-1 div {
height:inherit;
width:inherit;
background: lightblue;
}
JS:
$('.vis-1').hover(
function () {
(function flicker () {
$('.vis-1 div').fadeIn(10).delay(50).fadeOut(10);
flickerTimer = setTimeout(function () {
flicker();
}, 100);
})();
}, function () {
clearInterval(flickerTimer);
$('.vis-1 div').stop(true,true).fadeIn(10);
}
);