在圖像頂部的響應翻轉文本

-1

我已經在容器div內的圖像上放置了一些文本，在響應式佈局中。我現在想要創建一個「滾動」效果，其中鼠標懸停在文本上獲得覆蓋整個div /圖像的透明綠色背景色。因此圖像看起來有點綠。在圖像頂部的響應翻轉文本

見http://www.advocatedesign.co.uk/

任何幫助將受到歡迎！因爲我不知道你想要什麼...... 但你要找的懸停選擇這個答案

2014-06-18 user2991837

請crea使用相關的代碼使用JSFiddle（http://jsfiddle.net）。另外，你有沒有嘗試過自己想想？看到一個嘗試總是比「我想這樣做......任何幫助表示讚賞」更可取。最後，我們喜歡通過鏈接的代碼和JSFiddle來保持問題的相關性（以防將來的域名不再存在）。 –

那麼你想要文本有綠色背景着色？你想讓整個圖像發出綠色光芒嗎？ – ForgetfulFellow

，你想我們爲你做這個？請展示您已完成的一些工作！ – NoobEditor

你將需要另一個div，你可以用作「覆蓋」層。

JSFiddle Example

（在未來，請包括與相關的代碼你的問題中的一個的jsfiddle因爲它可以幫助大家誰幫助你）

HTML

<div class="case_study"> 
    <div class="overlay"></div> 
    <a href="small-woods.html"> 
     <img src="http://lorempixel.com/400/200/" alt="Small Woods case study"> 
     <p>Small Woods</p> 
    </a> 
</div>

CSS：

.case_study{ 
    position: relative; 
    height: 200px; 
    width: 400px; 
} 
.case_study:hover .overlay{ 
    background-color:green; 
    opacity: .3; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
}

來源

2014-06-18 17:13:11

天才。輝煌。非常感謝。我對這很多新東西（我從來沒有聽說過JSFiddle，我不知道如何獲得在這個網站上的灰色小盒子的HTML和CSS，所以感謝堅持與我，而不是給我一個難道有一種方法可以給你一些點數或名譽，或者他們被稱爲什麼嗎？ – user2991837

我不確定這裏發生了什麼： – user2991837

我不確定這裏發生了什麼：.case_study：hover .overlay is這與寫作相同.case_study a：hover .overlay？我剛剛試過這個，它不起作用。你的代碼的工作原理我只是不明白怎麼做？所以把鼠標懸停在.case_study div上。？我已經檢查過這個網站的幫助頁面，但是它似乎沒有說明我是如何讓代碼在單色空間字體的灰色框中出現的。 – user2991837

請評論？：http://www.w3schools.com/CSSref/sel_hover.asp

設置類hover，堅持所需的背景色在那裏：

P:hover 
{ 
background-color:green; 
}

來源

2014-06-18 16:54:36 ForgetfulFellow

在圖像頂部的響應翻轉文本

回答

相關問題