Glitches

Question

I did this rollover:

jsfiddle.net/DH6Lu/

But, as you can see, the background image crashes. This is not the case when I do not use opacityin the main div:

http://jsfiddle.net/6KT9p/

Any idea what is wrong?

<div id="opacity">
    <div class="box">
        <a class="link" href="#">
            <div class="inner">
                <img src="http://lorempixel.com/340/192/" width="340" height="192">
                <div class="description">
                    <h3>titel2</h3>
                </div>
            </div>
        </a>
    </div>
</div>

.box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.inner img {
    position: absolute;
    opacity: 1;
    -webkit-transition: opacity  0.5s ease;
}
.inner img:hover {
    opacity: 0.15
}
.description {
    background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
    width: 340px;
    height: 192px;
    position: absolute;
    z-index: -1;
}
.description h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
}
#opacity {
    opacity: 0.5
}

Answer 1

The problem arises from a fixed background property. Set CSS to

.description {
    background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
    width: 340px;
    height: 192px;
    position: absolute;
    z-index: -1;
}

and he will work

fiddle

, GPU . , CPU . transform: translateZ (1px) - GPU - . , .

Answer 2

, , .inner #opacity... . .

, , 0,5: .inner, .description, .

sibling + , .

( ):

.inner img {
    -webkit-transition: opacity 0.5s ease;
    opacity:0.5;
}

.inner img:hover{
    opacity:0.15;
}
.inner img:hover + .description{
    opacity:1;
}
.description {
    -webkit-transition: opacity 0.5s ease;
    opacity:0;
}

.