Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Можно ли сделать появление скрытого текста при наведении мыши на CSS?

Можно ли сделать появление скрытого текста при наведении мыши на CSS?


     27.05.2016    Стили (CSS)    406

вопрос
Здравствуйте. У меня такой вопрос. Есть такой CSS:
.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/

Ответил: kovalenko3331


.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;
}
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы