Изображение с эффектом наложения и наложения ⇐ CSS

[Anonymous]

Я пытаюсь вывести изображение с цветным наложением и ссылкой. Текст ниже, потому что изображение будет размером с миниатюры, и оно не подходит. Синтаксис? < /p>

Код: Выделить всё

[url=http://hup.o-zen.de]
[img]http://google.com[/img]
[/url]



text goes here

.port_container {
position: relative;
width: 50%;
}

.port_image {
display: block;
width: 100%;
height: auto;
}

.port_overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ff6600;
}

/* added index*/
.port_link {
position: relative;
transition: z-index 0s;
z-index: 0;
}
/*index on hover*/
.port_link:hover {
transition: z-index 0.5s ease;
z-index: 1;
}

.port_container:hover .port_overlay {
opacity: 0.5;
}

Я прочитал, что обертка всего Div по ссылке не полностью поддерживается, поэтому я бы не пошел по этому пути и надеюсь, что вы сможете заметить мою ошибку в коде.

Подробнее здесь: https://stackoverflow.com/questions/422 ... ver-effect