本日は前回に引き続き
マウスホバーで画像の上に文字を出すやり方2
画像にリンクを付けたはいいがもう少しかっこよくしたい!!
というときに使ってみたいエフェクトです。
今回はマスクが掛かり、横からスライドで登場します。
HTMLとCSSに以下の記述をしてみましょう
HTML
<div class="sample3">
<img src="./fruit.jpg" alt="文字が出ます" />
<div class="mask">
<div class="caption">It's fresh !</div>
</div>
</div>
CSS
.sample3 {
width: 280px;
height: 188px;
overflow: hidden;
margin: 10px 8px 10px 16px;
position: relative;
}
.sample3 .caption {
font-size: 130%;
color: #fff;
padding-top: 80px;
padding-left: 0px;
}
.sample3 .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0; /* マスクを表示しない */
background-color: rgba(0,0,0,0.4);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.sample3:hover .mask {
opacity: 1; /* マスクを表示する */
padding-left: 90px; /* 右にずらす */
}
It’s fresh !
おしゃれに出来ます
コメント