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

<divclass="main">la la 
    <divclass="under"><imgclass="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;
}