Частично не применяются стили

jeka22

Здравствуйте, уважаемые форумчане. Проблема в следующем:Нашел я CSS код для создания динамичных блоков, мне понравились и я решил их себе оставить. Проблема в том что мне необходимо прикрутить к ним HOVER эффект, я его прикрутил, но он срабатывает только в первом столбце, а в остальных не срабатывает. Не знаю почему, т.к. у всех одни и те же стили, блоки аналогичны и т.д. Ниже я дам ссылку на скриншот (я новичек на форуме и не знаю как тут у вас принято. Заранее прошу прощение, если что) А пока, я выложу код, для наглядности:HTML:
<div class="container"><!-- основной блок -->
   <div class="box"><!-- его боксы (если таких боксов много, то получается будто сетка) -->
      <img src="1.png" alt="Some image">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis, quae ducimus error reiciendis, tempore reprehenderit cupiditate asperiores eveniet veniam.</p>
      <div class="hidden"> <!-- скрытый HOVER блок -->
         <h3>Hello, world!</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat dolorum iure quia corporis libero veniam</p>
      </div> <!-- закрывам HOVER блок -->
   </div>  <!-- закрывам бокс -->
</div><!-- закрывам основной контейнер -->
CSS:
/* Основной блок */
 
.container{
            max-width: 1200px;
            margin: 0 auto;
            background: #eeeeee;
            padding: 20px;
            border: 1px solid #000;
            column-gap: 1.5em;
            -moz-column-gap: 1.5em;
            -webkit-column-gap: 1.5em;
        }
 
/* его боксы */
 
.box{
            display: inline-block;
            padding: 1em;
            margin: 0 0 1.5em;
            background: #fff;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-shadow: 2px 2px 4px 0 #ccc;
            position: relative;
            padding: 10px;
        }
 
/* ховер блок */
 
.hidden{ 
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(244,81,17,.85);
            color: #fff;
            text-align: center;
            transition: all 0.5s;
            overflow: hidden;
            cursor: default;
        }
 
/* Когда наводим на бокс, отображаем скрытый HOVER */
 
.box:hover .hidden{
            opacity: 1;
            display: block;
        }
 
/* подхоняем количество блоков под размер экрана */
 
@media only screen and (min-width: 400px) { .container{-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}}
         
@media only screen and (min-width: 700px) { .container { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }}
         
@media only screen and (min-width: 900px) { .container { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; }}
         
@media only screen and (min-width: 1100px) { .container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5;}}
Вот скриншот описывающий мою проблему:http://qps.ru/QcMTO
2 ответа

jeka22

http://jsfiddle.net/shakalaka/bmpLvh5o/ ваш код на jsfiddle, все работает. Вангую неправильно закрытые дивы


jeka22

ваш код на jsfiddle, все работает. Вангую неправильно закрытые дивы
Чтобы увидеть проблему нужно сделать не 3 блока, а штук 8-10. Тогда HOVER будет применяться только к первому столбцу.
Вангую неправильно закрытые дивы
Дико извеняюсь. Оказалось, это я просто через яндекс браузер тестировал, в остальных вроде работает.