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

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


     27.05.2016    Все вопросы » Стили (CSS)    731

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

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

наверх