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

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