画像にマウスがのると吹き出し文字がでてくる。
HTMLに
(セレクタは変えてもいいです)
fukidasiとukidasi1
<div class="fukidasi">
<img src="〇〇.jpg" >
<div class="fukidasi1">テキスト</div>
</div>
CSSに
.fukidasi img{ width: 300px;は画像の大きさ
.fukidasi{
position: relative;
cursor: pointer;
display: inline-block;
}
.fukidasi img{
width: 300px;
padding: 30px;
margin: 30px;
}
.fukidasi1 {
display: none;
position: absolute;
padding: 10px;
font-size: 12px;
line-height: 1.6em;
color: #fff;
border-radius: 5px;
background: #000;
width: 100px;
}
.fukidasi1:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
border: 15px solid transparent;
border-top: 15px solid #000;
margin-left: -15px;
}
.fukidasi:hover .fukidasi1{
display: inline-block;
top: -75px;
left: -50px;
}
.fukidasi:hover .fukidasi1{
display: inline-block;
top: -75px;
left: -50px;
は、吹き出しの位置を調整します。