Image with multiple icons on hover

For example, Image with multiple icons on hover...

Demo

HTML

<div class="imgHoverBg">
        <figure class="imgHover"> 
                <img src="img/switching-img-7.jpg" alt="Image" />
                <div class="icons">
                        <a><i class="fa fa-search-plus"></i></a>
                        <a><i class="fa fa-comments-o"></i></a>
                        <a><i class="fa fa-share-alt"></i></a>
                </div>
        </figure>
        <figure class="imgHover">
                <img src="img/switching-img-9.jpg" alt="Image" />
                <div class="icons">
                        <a><i class="fa fa-search-plus"></i></a>
                        <a><i class="fa fa-comments-o"></i></a>
                        <a><i class="fa fa-share-alt"></i></a>
                </div>
        </figure>
</div>

CSS

<style>
    .imgHoverBg { 
            background-color: #212121;
    } 
    
    .imgHover { 
            font-size: 16px; 
            line-height: 1.2em; 
            width: 31.333%; 
            position: relative; 
            float: left; 
            overflow: hidden; 
            margin: 10px 1%; 
    }
    .imgHover *,
    .imgHover *:before,
    .imgHover *:after {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
    }
    .imgHover:before { 
            position: absolute; 
            top: 10px; 
            bottom: 10px; 
            left: 10px; 
            right: 10px; 
            content: ''; 
            background-color: #ffffff; 
            opacity: 0;
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
    }
    .imgHover img { 
            max-width: 100%; 
            width: 100%; 
            vertical-align: top; 
    }
    .imgHover .icons { 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
    }
    .imgHover a { 
            margin: 2px; 
            opacity: 0; 
    }
    .imgHover a i { 
            display: block; 
            font-size: 23.52941176px; 
            line-height: 40px; 
            width: 40px; 
            background-color: #ffffff; 
            text-align: center; 
            color: #000000; 
    }
    .imgHover a i:hover { 
            background-color: #000000; 
            color: #ffffff; 
            cursor: pointer; 
    }
    .imgHover a:first-of-type {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    .imgHover a:last-of-type {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
    }
    .imgHover:hover:before,
    .imgHover.hover:before { 
            opacity: 0.5; 
    }
    .imgHover:hover a,
    .imgHover.hover a {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
    }
    /* Small Devices, Tablets */
    @media only screen and (max-width : 767px) {
            .imgHover { 
                    width:100%; 
                    margin:0 0 15px; 
            }
    }
</style>

Javascript

/* Demo purposes only */
$(".hover").mouseleave(
        function () {
                $(this).removeClass("hover");
        }
);