画像の上にマウスを乗せたときのテキスト

Question

3つの画像が連続して4つの列を持つウェブページを作成しました。マウスをマウスの上に置いたときに、異なる画像に異なるテキストを表示したい。私はこれに助けていただければ幸いです。

私の現在のHTMLコードは次のとおりです。

.col-4 {width: 33.33%; float:left;} 
 
.col-4 img { 
 
    width: 100%; 
 
    max-width: 300px; 
 
    height: 300px; 
 
    display: inline-block; 
 
}

<div class= "container"> 
 
    <div class= "overPhotos"> 
 
    <div class= "row"> 
 
     <div class="col-4 "> 
 
     <img src="rick_sanchez.png" alt="Avatar" class="image"> 
 
     </div> 
 
     <div class="col-4 "> 
 
     <img src="morty_smith.png" alt="Avatar" class="image"> 
 
     </div> 
 
     <div class="col-4"> 
 
     <img src="summer_smith.png" alt="Avatar" class="image"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ブロックする要素にブロック:hoverを追加する必要があります。これはあなたのためにこれを達成するコードです：

.col-4 { 
    width: 33.33%; 
    float: left; 
    position: relative; 
} 

.col-4 img { 
    width: 100%; 
    max-width: 300px; 
    height: 300px; 
    display: block; 
} 

.col-4 .hover-text { 
    display: none; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.5); 
    z-index: 100; 
} 

.col-4:hover > .hover-text { 
    display: block; 
} 

<div class="container"> 
    <div class="overPhotos"> 
    <div class="row"> 
     <div class="col-4 "> 
     <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image"> 
     <span class="hover-text">Hello, World!</span> 
     </div> 
     <div class="col-4 "> 
     <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image"> 
     <span class="hover-text">Hello, World!</span> 
     </div> 
     <div class="col-4"> 
     <img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" alt="Avatar" class="image"> 
     <span class="hover-text">Hello, World!</span> 
     </div> 
    </div> 
    </div> 
</div> 

私は、各コンテナにposition: relative;を追加する必要各ホバー要素にposition: absolute;を追加しました。

Fiddle here。スタックオーバーフローへ

Answer 2

変更して画像のaltテキスト。

<img src="summer_smith.png" alt="<your text here>" class="image">

Answer 3

これを行うための基本的な方法は、title属性である：

<img src="" alt="" title="your text goes here"> 

それとも、より高度なもの：Link

Answer 4

は、シンプルなスタイルを、次の試してみてください。このCSSについてのみのアプローチ方法

.col-4 {width: 33.33%; float:left;position: relative;overflow: hidden;} 
 
.col-4 img{ 
 
width: 100%; 
 
max-width: 300px; 
 
height: 150px; 
 
display: inline-block; 
 
} 
 

 
.col-4 .caption { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    color: #fff; 
 
    z-index: 1; 
 
    padding: 4px; 
 
    bottom: -100%; 
 
    transition: bottom ease 0.4s; 
 
} 
 

 
.col-4:hover .caption { 
 
    bottom: 0; 
 
}

<div class= "container"> 
 

 
<div class= "overPhotos"> 
 
    <div class= "row"> 
 
     <div class="col-4 "> 
 
     <img src="rick_sanchez.png" alt="Avatar" class="image"> 
 
     <div class="caption">Image 1</div> 
 
     </div> 
 
     <div class="col-4 "> 
 
     <img src="morty_smith.png" alt="Avatar" class="image"> 
 
     <div class="caption">Image 2</div> 
 
     </div> 
 
     <div class="col-4"> 
 
     <img src="summer_smith.png" alt="Avatar" class="image"> 
 
     <div class="caption">Image 3</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 5

.col-4 {width: 30%; float:left; background: #000; margin: 10px; position: relative;} 
 
.col-4 img{ 
 
width: 100%; 
 
max-width: 300px; 
 
height: 300px; 
 
display: inline-block; 
 
} 
 
.col-4 span { 
 
    color: #fff; 
 
    position: absolute; 
 
    left:50%; 
 
    top:50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -ms-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
    display:none; 
 
} 
 
.col-4:hover span { 
 
display:block; 
 
}

\t <div class= "container"> 
 

 
<div class= "overPhotos"> 
 
    <div class= "row"> 
 
     <div class="col-4 "> 
 
     <img src="rick_sanchez.png" alt="Avatar" class="image"> 
 
     <span>image caption</span> 
 
     </div> 
 
     <div class="col-4 "> 
 
     <img src="morty_smith.png" alt="Avatar" class="image"> 
 
     <span>image caption</span> 
 
     </div> 
 
     <div class="col-4"> 
 
     <img src="summer_smith.png" alt="Avatar" class="image"> 
 
     <span>image caption</span> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

.col-4 {width: 30%; float:left; background: #000; margin: 10px; position: relative;} 
 
.col-4 img{ 
 
width: 100%; 
 
max-width: 300px; 
 
height: 300px; 
 
display: inline-block; 
 
} 
 
.col-4 span { 
 
    color: #fff; 
 
    position: absolute; 
 
    left:50%; 
 
    top:50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    -ms-transform: translate(-50%,-50%); 
 
    -moz-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

\t <div class= "container"> 
 

 
<div class= "overPhotos"> 
 
    <div class= "row"> 
 
     <div class="col-4 "> 
 
     <img src="rick_sanchez.png" alt="Avatar" class="image"> 
 
     <span>image caption</span> 
 
     </div> 
 
     <div class="col-4 "> 
 
     <img src="morty_smith.png" alt="Avatar" class="image"> 
 
     <span>image caption</span> 
 
     </div> 
 
     <div class="col-4"> 
 
     <img src="summer_smith.png" alt="Avatar" class="image"> 
 
     <span>image caption</span> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 6

？

.col-4:nth-child(1):hover:after{position: absolute; content:"your text 1";} 
.col-4:nth-child(2):hover:after{position: absolute; content:"your text 2";} 
.col-4:nth-child(3):hover:after{position: absolute; content:"your text 3";} 

チェック作業のデモのためにこれらのかわいい子猫：https://codepen.io/anon/pen/WZgQPE

PS。 Ctrlキーを押しながらリンクをSO refuses to implement target='_blank'としてクリックしてください。

Answer 7

あなただけの画像タグにtitle属性を追加する必要が

...

<img src="rick_sanchez.png" title="abc" alt="Avatar" class="image">