HTML/CSS Cool hover effect for image

<!-- Before start, we need to split image on equals strips for current effect. You can split it for your purposes --> <div class="w"> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="i"></div> <div class="h"> </div> </div> <style> .w{ margin: 0 auto; white-space: nowrap; max-width: 1200px; width: 100%; height: 600px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background:rgba(#424242,.5) url($url2) repeat fixed; background-position: 50% 100%; background-size : cover; position: relative; z-index: 5; font-size: 0; } .i{ width: $itemWidth; height: 100%; display: inline-block; position: relative; z-index: 4; padding: 2px; transition: all 1.3s ease-in-out; background:rgba(#424242,.5) url($url) repeat fixed; background-size : cover; background-position: 50% 100%; border-radius : 0%; &:hover{ transition: all 0s linear; opacity:0; } } .h{ display: block; position: absolute; z-index: 2; width: 100%; text-align: center; top: 35px; font-size: 40px; color: rgba(245, 245, 220, 1); text-shadow: 0 5px 17px rgba(87, 87, 80, 0.85); } </style>