сижу, изучаю css, html, верстал макет из PSD файла. В общем там картинки располагаются интересным методом(скрин прилогается). Я эти картинки начал запихивать списками. Запихал- встали нормально. Но у них есть эффект при наведении(затеняется фон, и появляются разные надписи. Скрин есть). Я это дело делал след. образом:
в нутри каждого li создал блок over_block, сделал ему стилистику подходящуу и скрыл opacity 0. И при наведении на любой из пунктов li у того блока opacity становится равным 0.8. Все хорошо, но вот только картинки разной высоты, а содержимое блока почему то под эту разную высоту не адаптируется, хотя все в процентах задал. Что я делаю не так? Гуру и просто кто понимает направьте на путь истинный )))
html
<ul class="content">
<li><a href="#"><img src="images/one-two.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a href="#"><img src="images/two-two.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a href="#"><img src="images/free-two.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
</ul>
<ul class="content">
<li><a href="#"><img src="images/one-free.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a href="#"><img src="images/two-free.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
<li><a href="#"><img src="images/free-free.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
</ul>
<ul class="content">
<li><a href="#"><img src="images/one-four.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt="">
</a>
<a href="#"><img src="images/like-inc.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="#"><img src="images/two-four.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt="">
</a>
<a href="#"><img src="images/like-inc.png" alt="">
</a>
</div>
</div>
</li>
<li><a href="#"><img src="images/free-four.png" alt=""></a>
<div class="over_block">
<a href="#"><p class="title">title here</p></a>
<p class="sub-title">At vero eos et accusamus et<br> iusto odio dignissimos ducimus <br>qui blanditiis praesentium</p>
<div class="icons">
<a href="#"><img src="images/link-ic.png" alt=""></a>
<a href="#"><img src="images/like-inc.png" alt=""></a>
</div>
</div>
</li>
</ul>
</div>
</div>
css
.portfolio .content{
margin-top: 70px;
float: left;
}
.portfolio .content li{border: 1px solid red;
margin: 6px 6px;
display: block;
position: relative;
overflow: hidden;
}
.portfolio .content .over_block{
background-color: #131313;
opacity: 0.8;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
padding: 35% 15%;
text-align: left;
opacity: 0.8;
}
.portfolio .content .over_block p.title{
padding-top: 0;
margin-bottom: 0;
padding-bottom: 25%;
font: 20px Source Sans Pro Light, sans-serif;
color: #19bd9a;
line-height:2;
}
.portfolio .content .over_block p.title:after{
display: block;
content: "";
height: 2px;
width: 0%;
background-color: #19bd9a;
}
.portfolio .content .over_block p.title:hover:after,
.portfolio .content .over_block p.title:focus:after {
width: 24px;}
.portfolio .content .over_block p.sub-title{
font: 12px/18px open_sansregular, sans-serif;
color: #b2b3b3;
}
.portfolio .content .over_block .icons{
}
.portfolio .content .over_block .icons a{
margin-right: 5px;
display: inline-block;
width: 30px; height: 30px;
background-color: #000000;
border-radius: 50%;
padding: 8px 8px;
}
.portfolio .content .over_block .icons a:hover{
background-color: #19bd9a;
}
.portfolio .content .over_block:hover{
opacity: 0.8;
}
