使用HTML/CSS將文字定位在懸停的圖像上

查看現有答案以及其他在線教程後，我仍然無法弄清懸停時如何在圖像上放置文本。這裏是形象會是什麼樣當光標懸停在圖像上類似的例子：使用HTML/CSS將文字定位在懸停的圖像上

Image with Hover Text 我當前的代碼如下：

.project { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.project img { 
 
\t margin-top: 3em; 
 
\t width: 27em; 
 
\t height: 25em; 
 
\t position: relative; 
 
} 
 

 
.project img:hover .project p, .project img:hover .project h4 { 
 
\t opacity: 1; 
 
} 
 

 
.project p, .project h4 { 
 
\t background: rgba(0,0,0,0.5); 
 
\t color: white; 
 
\t height: 25em; 
 
\t width: 27em; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity: 0; 
 
}

<div id="project_section"> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <h2>PROJECTS</h2> 
 
\t \t 
 
\t \t \t \t <div class="col-sm-6 project"> 
 
\t \t \t \t \t <img src="https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt=""> 
 
\t \t \t \t \t <h4>Name</h4> 
 
\t \t \t \t \t <p>Put some information here...</p> 
 
\t \t \t \t </div> 
 
\t \t \t 
 
\t \t \t \t <div class="col-sm-6 project"> 
 
\t \t \t \t \t <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt=""> 
 
\t \t \t \t \t <h4>Namep</h4> 
 
\t \t \t \t \t <p>Put some information here...</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

在當前狀態下，當鼠標懸停在圖像上時，文本完全不顯示。我錯過了什麼？

來源

2017-05-26 gcccpp

的關鍵是不將元件定位「懸停」 - 但它positiion你怎麼想它，並顯示它 - 懸停/或者與JavaScript的 - 或不透明度和CSS等

https://jsfiddle.net/sheriffderek/grkaw0o3/

標記

<div class="parent"> 
    <div class="child"> 
    <span>stuff</span> 
    </div> 
</div>

個

風格

.parent { 
    position: relative; /* define context for absolutly positioned children */ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

.child { 
    position: absolute; /* position based on boundery created by nearest relative ancestor */ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: white; 
}

現在有了懸停......（相同的標記）

https://jsfiddle.net/sheriffderek/ykpacq59/

.parent { 
    position: relative; /* define context for absolutly positioned children */ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 

.parent:after { 
    content: ''; /* :after has to have a content... but you don't want one */ 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 

    background: rgba(0,0,0,0); 

    transition: 1s; 
} 

.parent:hover:after { 
    background: rgba(0,0,0,.5); 
} 

.parent:hover .child { 
    opacity: 1; 
} 

.child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

    z-index: 5; /* only works when position is defined */ 
    /* think of a stack of paper... this element is now 5 higher than the bottom */ 

    color: white; 

    opacity: 0; 
    transition: .5s; 
}

來源

2017-05-26 19:23:05 sheriffderek

懸停:) – Gerard

阿後面的文本應該變得可見。我會補充一點。 – sheriffderek

看起來不錯！可以有背景圖片而不是顏色嗎？我嘗試過用'background-image'替換'background'並使用你的解決方案，最終結果只是一個空白區域 – gcccpp

您可以使用z-index。

相對位置添加到父，然後創建用於圖像和文本的div絕對位置和較高的z索引設置到頂部（文本）DIV

來源

2017-05-26 19:14:37

可以使用兄弟選擇到TA rget你的文本元素（我也會將p和h4包裝到塊級元素中。

我不認爲css可以在懸停節點上移動節點。

Is there a CSS parent selector?

.project img:hover ~ p, .project img:hover ~ h4 { 
    opacity: 1; 
}

來源

2017-05-26 19:30:37

使用HTML/CSS將文字定位在懸停的圖像上

回答

相關問題