Атрибут data и его очень интересные свойства

[html]<div class="lake3" data-title="Атрибут data"> Атрибут бла бла бла</div>

<style>
.lake3 {
position: relative;
overflow: hidden;
}
.lake3:after {
content: attr(data-title);
position: absolute;
color: #000;
top: 0px;
left: 70px;
transition: transform .4s ease-out;
transform: translateY(-300%) scale(1);
}
.lake3:hover:after {
transform: translateY(-50%) scale(1);
}</style>[/html]

Код:
<div class="lake3" data-title="Атрибут data"> Атрибут</div>


/////CSS
Делаем позиционирование и выплывание./////

.lake3 {
position: relative;
overflow: hidden;
}
.lake3:after {
content: attr(data-title);
position: absolute;
color: #000;
top: 0px;
left: 70px;
transition: transform .4s ease-out;
transform: translateY(-300%) scale(1);
}
.lake3:hover:after {
transform: translateY(-50%) scale(1);
}