本日は
マウスホバーで画像の上に文字を出すやり方
画像にリンクを付けたはいいがもう少しかっこよくしたい!!
というときに使ってみたいエフェクトです。
HTMLとCSSに以下の記述をしてまずは単純な文字出しから。
HTML
<div class="sample1">
<img src="./fruit.jpg" alt="文字が出ます" />
<div class="mask">
<div class="caption">It's fresh !</div>
</div>
</div>
CSS
.sample1 {
width: 280px;
height: 188px;
overflow: hidden;
margin: 10px 8px 10px 16px;
position: relative; /* 相対位置指定 */
}
.sample1 .caption {
font-size: 130%;
text-align: center;
padding-top: 80px;
color: #fff;
}
.sample1 .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.2s ease;
transition: all 0.2s ease;
}
.sample1:hover .mask {
opacity: 1; /* マスクを表示する */
}

It’s fresh !
まあまあおしゃれに出来ます
コメント