Показать сообщение отдельно
  #2 (permalink)  
Старый 31.01.2016, 00:07
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

Сделал вот так, подскажите насколько кросбраузерно, ну и эстетично:

<style>
.click{ width: 24%; border: 1px #bababa solid;float:left;}
.one {position: relative;width: 100%;}
.click .overlay{width: 100%;  background: #ffcc00;height: 50px;overflow: hidden;}
.click:hover .overlay{position: absolute;top: 0; left: 0; z-index:1;border: 1px #bababa solid;height: 100%;width: 100%;display: table;}
</style>
<div style="width:100%">
<div class="click">
  <div class="one">   <div class="overlay">1<br><br><br><br>11</div>  </div>         	 
</div>
<div class="click">
     <div class="one"><div class="overlay">2<br><br><br><br>22</div></div>         	 
</div>
<div class="click">
    <div class="one"> <div class="overlay">3<br><br><br><br>33</div> </div>          	 
</div>
<div class="click">
   <div class="one">  <div class="overlay">4<br><br><br><br>44</div> </div>          	 
</div></div>

<div style="width:100%">
<div class="click">
  <div class="one">   <div class="overlay">1<br><br><br><br>11</div>  </div>         	 
</div>
<div class="click">
     <div class="one"><div class="overlay">2<br><br><br><br>22</div></div>         	 
</div>
<div class="click">
    <div class="one"> <div class="overlay">3<br><br><br><br>33</div> </div>          	 
</div>
<div class="click">
   <div class="one">  <div class="overlay">4<br><br><br><br>44</div> </div>          	 
</div></div>
Ответить с цитированием