Как сделать картинику поверх блона на :hover?

Question

[Павел]

Есть шаблон demo.nrgthemes.com/projects/mierawp/portfolio
там секция THE WORK , когда наводишь на картинку появляется плюиск , сама картинка увеличивается. Вот все эффекты "своровал" а плюс этот не хочет работать.

Answer 1

[Алексей Колесников]

Собственно у них использован псевдоэлемент after
вот его css

a:after {
    content: "";
    background: url(../images/plus.png) no-repeat center center;
    color: #000000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    margin: 0 auto;
    top: 0;
    opacity: 0;
    transition: .4s;
}

a:hover:after {
    opacity: 1;
    transition: .4s;
}

а здесь сам плюсик

Answer 2

[Денис Инешин]

Обычный div поверх, с opacity: 0 в начале и opacity: 1 в конце.

Comments

[Павел]

а чтоб не плодить лишних оберток? В шаблоне как-то сделано через :after?

[dpismenny]

mrusklon: а чтоб не плодить лишних вопросов? В браузере открыть девтулз и посмотреть?

[Павел]

еслиб мог найти , не спрашивал бы :)

[Денис Инешин]

mrusklon: after не нужен.