$('.news-block_main').hover( function() { $('.news-block-hover_main').show('fast'); }, function() { $('.news-block-hover_main').hide('fast'); } ); $('.news-block_2').hover( function() { $('.news-block-hover_2').show('fast'); }, function() { $('.news-block-hover_2').hide('fast'); } ); $('.news-block_3').hover( function() { $('.news-block-hover_3').show('fast'); }, function() { $('.news-block-hover_3').hide('fast'); } ); $('.news-block_4').hover( function() { $('.news-block-hover_4').show('fast'); }, function() { $('.news-block-hover_4').hide('fast'); } ); $('.news-block_5').hover( function() { $('.news-block-hover_5').show('fast'); }, function() { $('.news-block-hover_5').hide('fast'); } ); $('.news-block_6').hover( function() { $('.news-block-hover_6').show('fast'); }, function() { $('.news-block-hover_6').hide('fast'); } ); 
 .news-blocks { max-width: 1210px; margin: 0 auto; } .news-list { position: relative; height: 676px; margin-top: 10px; } .anews { position: absolute; top: 0; left: 0; width: 33.33%; height: 33.33%; } .news-block { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #555; background-position: center center; background-size: cover; overflow: hidden; } .news-block:hover h2 { color: #000; } .news-block h2 { font-size: 24px; font-family: ProximaBold; line-height: 1.2em; } .news-block-stf { position: absolute; margin: 90px 100px; } .news-block.news-block_main { width: 200%; height: 202%; top: 0; left: 0; } .news-block.news-block_2 { top: 0; left: 200%; border-left: 4px solid #0e0f16; } .news-block.news-block_3 { top: 100%; left: 200%; border-left: 4px solid #0e0f16; border-top: 4px solid #0e0f16; } .news-block.news-block_4 { top: 202%; left: 0%; border-top: 4px solid #0e0f16; } .news-block.news-block_5 { top: 202%; left: 100%; border-top: 4px solid #0e0f16; border-left: 4px solid #0e0f16; } .news-block-hover_5 img { width: 398px; height: 225px; } .news-block.news-block_6 { top: 202%; left: 200%; border-top: 4px solid #0e0f16; border-left: 4px solid #0e0f16; } .news-block .news-block-descr { padding: 21px 20px 11px; font-family: 'Roboto Condensed', 'Segoe UI', Tahoma, Arial, sans-serif; } .news-block-descr { position: absolute; bottom: 7%; left: 0; width: 95%; padding: 15px 10px 8px; color: #fff; line-height: 1em; z-index: 5; } .news-block_2 .news-block-descr, .news-block_3 .news-block-descr, .news-block_4 .news-block-descr, .news-block_5 .news-block-descr, .news-block_6 .news-block-descr { bottom: 11%; } .news-block:hover .news-block-stats { color: #000; } .news-block-stats span.news-comm { text-decoration: underline; } .news-block-stats span { font-family: ProximaLight; } .news-block .news-block-step_to_full_main, .news-block-step_to_full_2, .news-block-step_to_full_3, .news-block-step_to_full_4, .news-block-step_to_full_5, .news-block-step_to_full_6 { opacity: 0; transition: 0.3s all; z-index: 10; } .news-block .news-block-step_to_full_main { right: -60px; margin-top: 415px; position: absolute; } .news-block:hover .news-block-step_to_full_main, .news-block-step_to_full_2, .news-block-step_to_full_3, .news-block-step_to_full_4, .news-block-step_to_full_5, .news-block-step_to_full_6 { opacity: 1; transition: 0.3s all; z-index: 10; } .news-banner { margin-top: 15px; overflow: hidden; } .news-banner img { width: 1210px; } .news-block-hover_main, .news-block-hover_2, .news-block-hover_3, .news-block-hover_4, .news-block-hover_5, .news-block-hover_6 { display: none; position: absolute; bottom: 0; left: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="news-list"> <div id="actuallynews" class="anews"> <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/NG5QZQv.jpg);"> <a href="#"> <div class="news-block-hover_main" style="display:none;"> <img src="http://i.imgur.com/XjdCeR1.png"> </div> </a> </div> <div class="news-block news-block_2" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> <div class="news-block-hover_2" style="display:none;"> <img src="http://i.imgur.com/0Onvos6.png"> </div> </div> <div class="news-block news-block_3" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> <div class="news-block-hover_3" style="display:none;"> <img src="http://i.imgur.com/0Onvos6.png"> </div> </div> <div class="news-block news-block_4" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> <div class="news-block-hover_4" style="display:none;"> <img src="http://i.imgur.com/0Onvos6.png"> </div> </div> <div class="news-block news-block_5" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> <div class="news-block-hover_5" style="display:none;"> <img src="http://i.imgur.com/0Onvos6.png"> </div> </div> <div class="news-block news-block_6" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> <div class="news-block-hover_6" style="display:none;"> <img src="http://i.imgur.com/0Onvos6.png"> </div> </div> </div> </div>

Now it seems to me - it looks very crutch and wrong, but it works as it should. What can be done with JS - so that it looks more or less normal.

    2 answers 2

    Update : As noted by @Maqsood in this case, you can do without using js at all. If possible it is better to use :hover css selector, instead of hanging a set of js events.

    Create an object with selectors for elements that you will hide or show. Then go through it, adding events.

     var blocks = { '.news-block_main': '.news-block-hover_main', '.news-block_2': '.news-block-hover_2', //... other blocks }; //es6 for( var selector in blocks ){ //let variable will "remember" it's value when event fire. //it doesn't hoist (accessible only in for loop). let $hover_block = $( blocks[ selector ] ); $( selector ).hover( function() { $hover_block.show('fast'); }, function() { $hover_block.hide('fast'); } ); } //es5 version for( var selector in blocks ){ var $hover_block = $( blocks[ selector ] ); //"var" variable will change it value on each iteration // it hoist to top of function (if any). //need to create separate scope for each iteration. ( function( $hover_block ){ $( selector ).hover( function() { $hover_block.show('fast'); }, function() { $hover_block.hide('fast'); } ); }( $hover_block ) ); }

      I can recommend using only CSS.

      An example of my implementation:

       .my_div { width: 402px; height: 224px; background-repeat: no-repeat; position: relative; overflow: hidden; } .my_div span { position: absolute; top: 402px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .my_div:hover > span{ top: 0; }

      HTML

       <div class="my_div" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> <span><img src="http://i.imgur.com/0Onvos6.png"></span> </div>

      See how it works: jsfiddle.net/eLxggt4g/