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"); } );