【更新日 : 】
【css】マウスオーバーで要素をフェードインさせる
要素をcssでフェードインさせるサンプルです。
cssでアニメーションさせるにはtransitionを使います。
html
<div class="hover">
<p>マウスオーバー</p>
<p class="text">テキストフェードイン</p>
</div>
opacity以外でもアニメーションを適当する場合は transitionのopacityをallに。
時間やイージングも自由にカスタマイズ可能です。
css
.hover {
background: #fff;
padding: 15px;
width: 200px;
}
.hover:hover .text {
opacity: 1;
}
.text {
opacity: 0;
color: red;
transition: opacity 0.3s ease;
}
sass / compass
.hover {
background: #fff;
padding: 15px;
width: 200px;
&:hover .text {
opacity: 1;
}
}
.text {
opacity: 0;
color: red;
@include transition(opacity 0.3s ease);
}