CSS Hover Jitter Issue

This is my first question. I usually try to research these things well, but this one is driving me crazy. I need to be able to do something very similar to what you see here (hove

Solution 1:

Instead of visibility: hidden; try using opacity: 0;

.over:hover {
    opacity: 0;
}

http://jsfiddle.net/6WPHk/

You can even setup a transition on the .over div:

.over {
    transition: opacity 0.3s;
}

Solution 2:

It might be easier to make the .over a child of .under.

1. It would be a lot easier to position .over.
2. You can then apply the hover selector to .under, while still applying the visibility rule to .over.

JSFiddle

HTML

<div class="main">la la 
    <div class="under">
        <img class="over" src="//lorempixel.com/100/100" alt="">
        Bibendum Etiam Fermentum Mattis
    </div>
</div>

CSS

.under {
    position: relative;
}

.under:hover .over {
    display: none;
}

.over {
    position: absolute;
    top: 0;
    left:0;
}