вопрос
Здравствуйте. У меня такой вопрос. Есть такой CSS:
и такой HTML:
Можно ли как-то средствами CSS сделать так, чтобы текст "Ее загадочная улыбка завораживает..." был как бы скрыт, но появлялся, то есть смещался вверх при наведении мыши на
Пример https://jsfiddle.net/k96w3u1v/35/
.example3 {
display:inline-block;
position:relative;
}
.example3 .example_text {
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color:#fff;
padding:10px;
background-color:rgba(0,0,0,.3);
}
.example3 h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px; font-weight:bold;
}
.example3 span {
font-size:12px;
}и такой HTML:
<div class="example3">
<img src="http://www.mk.ru/upload/objects/articles/detailPicture/44/a2/29/034652287_4471646.jpg" />
<div class="example_text">
<h2>Джоконда</h2>
<span>Десять главных секретов Джоконды.</span><br />
<span>Ее загадочная улыбка завораживает. Одни видят в ней божественную красоту, другие – тайные знаки, третьи – вызов нормам и обществу.</span>
</div>
</div>
Можно ли как-то средствами CSS сделать так, чтобы текст "Ее загадочная улыбка завораживает..." был как бы скрыт, но появлялся, то есть смещался вверх при наведении мыши на
<div class="example_text"> </div>
Пример https://jsfiddle.net/k96w3u1v/35/
.example3 {
display:inline-block;
position:relative;
}
.example3 .example_text {
position:absolute;
left:0;
bottom:0;
width:100%;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color:#fff;
padding:10px;
background-color:rgba(0,0,0,.3);
}
.example3 h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px; font-weight:bold;
}
.example3 span {
font-size:12px;
}
.example_text {
display:none;
}
.example3:hover .example_text{
display:block;
}
