Почему не работает overlay картинки на hover в ИЕ8?

Question

[arlovski]

Ребята, сломал всю голову. В ИЕ9 работает, в ИЕ8 нет, никаких идей не осталось. Спасибо за помощь.
Код:

<div class="image">
    <img src="http://i57.tinypic.com/3bl8n.png" alt="" />
    <div class="overlay"><a href="#"></a></div>
</div>

.image {
    width: 300px;
    position: relative;
    background-color: #e76049;
    cursor: pointer;
}
.image img {
    display: block;
    max-width: 100%;
}
.image a {
    display: block;
    width: 100%;
    height: 100%;
}

.image .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://i62.tinypic.com/4jvwk7.png') no-repeat center / 53%;
    opacity: 0;
    z-index: 5;
}

.image:hover img {
    opacity: 0.2;
}
.image:hover .overlay {
    opacity: 1;
}

jsbin.com/nigiromupe/1/watch?html,css,output (напрямую в ИЕ8 не открывается, но я не нашёл платформы, в которой бы открывалось, извините)

Answer 1

[Евгений Петров]

Стоило бы, для начала, выяснить, что поддерживается в IE8, и, в частности, opacity и background-size (неожиданно, правда?).
А потом допилить свой пример до нужной кондиции, выделив background-size из описания фона и добавив в нужные места
filter: alpha(opacity=...);
Вот только мешать такие правила с нормальными — не дело. Для старых IE подключайте свои файлы с помощью conditional comments.

Comments

[arlovski]

спасибо, только все остальные свойства background пришлось тоже выделить, с одним background-size у меня не работало.

Answer 2

[Павел Сайк]

.image a {} - не будет работать, надо выкинуть внутренний блок, добавить его стили как раз ссылке, и будет окей.

<div class="image">
    <img src="http://i57.tinypic.com/3bl8n.png" alt="" />
    <a href="#"></a>
</div>

.image a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://i62.tinypic.com/4jvwk7.png') no-repeat center / 53%;
    opacity: 0;
    z-index: 5;
}

.image:hover img {
    opacity: 0.2;
}
.image:hover a {
    opacity: 1;
}