懸停在圖像上的文字

-2

我創建了一個網頁，其中有三個圖像，每個圖像佔用四列，當鼠標懸停在不同的圖像上時，我希望不同的文字出現在不同的圖像上。我會很感激幫助。懸停在圖像上的文字

我當前的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>

來源

2017-10-11 Computing User

歡迎堆棧溢出！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

您是否在發佈前嘗試過搜索此內容？字面上有[數百個類似的問題]（https://stackoverflow.com/search？q =文本+懸停+ + +圖片）與答案 – FluffyKitten

可能重複的[如何將文本放在HTML圖像？]（https://stackoverflow.com/questions/5758642/how-to-put-text-over- images-in-html） – godzsa

您需要將: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: absolute;每個懸停元素，因此有必要增加一個position: relative;每個容器。

Fiddle here。

來源

2017-10-11 11:14:36

變化您的圖片alt文本。

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

來源

2017-10-11 11:02:53 Idlepoze

你可能是指title屬性。 – VXp

我看到它已經改變，它曾經是alt。遠離HTML到很久我猜。 – Idlepoze

這樣做的基本方法是使用title屬性：

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

或者也可以是更先進：Link

來源

2017-10-11 11:05:41 18zehn

試試下面這個簡單的風格。

.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>

來源

2017-10-11 11:12:07 Harish

.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>

來源

2017-10-11 11:13:33 Saika

這顯示圖像上方的文字，但OP希望文字出現在懸停上。 –

是的，我編輯了我的代碼:) – Saika

這個怎麼樣CSS唯一的方法？

.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'。

來源

2017-10-11 11:13:34 JoostS

你只需要在圖像標籤添加標題屬性...

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

來源

2017-10-11 11:23:44

懸停在圖像上的文字

回答

相關問題