Как сделать, чтобы при наведении на картинку выдвигался прозрачный фон с иконкой по центру?

Question

[Алексей]

Здравствуйте. Была дана задача сделать подобную галлерею:

Как организовать чтобы при наведении на картинку появлялась лупа и была картинка закрашена полупрозрачным фоном?
и как грамотней реализовать такую галерею?

Answer 1

[Oaks]

Пользуйтесь) Появление элементов при наведении на блок (Xoverlay)
Вместо тех иконок что есть в примерах вставьте

<i class="fa fa-search"></i> или <i class="fa fa-search-plus"></i>

но для этого вам нужно будет подключить Font Awesome

А для такой галереи картинок воспользуйтесь Masonry.js и обычной каруселью на jQuery

Answer 2

[Стас]

Можно сделать так
Вот пример cssdeck.com/labs/full/ga7c2avq

<div class="image">
    <img src="http://image.shutterstock.com/display_pic_with_logo/903799/224493577/stock-vector-set-of-people-icons-in-flat-style-with-faces-vector-women-men-character-224493577.jpg">
    <div class="caption">
        <div class="lupa "></div>
    </div>

.image {
    position: absolute;
}
.image .caption {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.7s;
    opacity: 0;
}
.image .caption:hover {
    opacity: 1;
    visibility: visible;
}
.lupa {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background: url(http://rabochii.ucoz.net/magnifying47.png);
    background-repeat: no-repeat;
    background-position: center center;
}

Answer 3

[Максим Тимофеев]

Картинка с лупой должна быть изначально, но под основной картинкой, при наведении меняем z-index и получаем желаемые результат