$('.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>
Сейчас как мне кажется - он выглядит очень костыльно и неправильно, но при этом работает как мне надо. Что можно сделать с JS - чтобы это выглядело более менее нормально.