Цель: Создать блок Div, при наведении которого появляется ещё один блок с данными, и таблицей...
Вопрос: Как реализовать плавное появление не только блока, но и таблицы отдельно?
Ключевой момент в css:
.animatablichka.
Заранее спасибо!;)
Вот код:
<style type="text/css">
.fonskart{
padding-top:80px;
width:920px;
height:600px;
background-image:url('http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/sams.jpg');
}
.punktikblok{
width:20px;
height:30px;
margin:0px 460px 0px 460px;
display:block;
position:relative;
transition-duration:1s;
}
.yarlik{
width:20px;
height:30px;
}
.descr{
display: block;
position: absolute;
background: #ededed;
color: #555;
font-size: 14px;
padding: 7px 20px;
line-height: 18px;
margin-top: 20px;
opacity: 0;
visibility: hidden;
width:250px;
height:200px;
-webkit-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
-moz-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
-o-transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
transition: opacity 0.3s, margin-top 0.3s, visibility 0s linear 0.3s;
transition-duration:1s;
box-shadow:0px 0px 10px #E1E1E1;
}
.punktikblok:hover .descr {
margin-top: 0;
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.punktikblok_fixed .descr {
pointer-events: none;
}
.punktikblok_fixed:hover .descr {
pointer-events: auto;
}
.kartinkavkvad{
width:80px;
height:80px;
float:right;
padding-top:0px;
margin-top:0px;
border-radius:10px;
}
.descr:hover .animatablichka{
width:150px;
transition-delay: 0s;
}
.animatablichka{
transition-duration:1s;
width:100px;
}
.tablichka{
float:left;
width:auto;
height:auto;
}
.blokdlyakartink{
float:right;
}</style>
<div class="fonskart">
<div class="punktikblok">
<div class="descr">
<div style="width:auto; height:auto; border-bottom:3px solid #fff;margin-bottom:5px;">
<span style="display: block; color:#444649; font-weight:bold; text-align:center;">КРОТИ</span></div>
<div class="tablichka">
<table class="animatablichka" style="padding: 5px; border: 1px solid rgb(51, 51, 51);">
<tbody>
<tr>
<td>
Площа, га</td>
<td>
5,5</td>
</tr>
</tbody>
</table>
<a href="#">Интересная ссылка</a></div>
<div class="blokdlyakartink">
<a><img class="kartinkavkvad" src="http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/kroti55.jpg" /></a></div>
</div>
<a href="#"><img class="yarlik" href="#" src="http://pyryatyn.adm-pl.gov.ua/sites/pyryatyn.adm-pl.gov.ua/files/images/small.png" /></a></div>
</div>
Простой
Простой