在鼠標懸停時添加疊加

Question

我是一個非常新的Web開發人員。 我目前正在編寫一個簡單的wordpress登陸頁面 ，我想添加一些功能，當用戶將鼠標懸停在所述圖像上時變暗並添加文本。 它確實應該是非常簡單的事情。

對於一個實際實現相同的wordpress主題並正確執行的示例 。

在上面頁面的“關於我們”部分，他們的圖片具有我懸停所需的完全相同的功能，但我不知道他們是如何做到的。

如果您需要進一步澄清，請不要猶豫，我不確定我的詞典是否正確/清楚。

Answer 1

DEMO

只需在包裝器鼠標懸停時顯示帶有不透明度的白色background元素和內容元素。 請注意，您需要將內容與背景元素分開，以便背景的不透明度不會影響內容。

<div class="wrap">
    <div class="content">This is the content</div>
    <div class="bkg"></div>
</div>

.wrap {
    background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
    width:475px;
    height:365px;
    position:relative;
}
.wrap:hover .bkg {
    display:block;
}

.wrap:hover .content {
    display:block;
}

.bkg {
    background:#fff;
    opacity:0.5;
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    z-index:1;
    filter: alpha(opacity=50);
}

.content {
    width:100%;
    height:100%;
    display:none;
    z-index:3;
    position:absolute;
}

Answer 2

這是懸停時的css轉換。

在這里觀看現場演示

這是設置html：

<div class="container">
    <div class="bottom-layer"></div>
    <div class="overlay">
        <h2>Hi there!</h2>
    </div>
</div>

容器具有定位的覆蓋層，其覆蓋在底層內容上。

這是駕駛css：

.container,
.bottom-layer,
.overlay {
    height: 100px;
    width: 200px;
}

.container {
    position: relative;
}

.bottom-layer {
    background-image: url(http://rndimg.com/ImageStore/OilPaintingBlue/200x100_OilPaintingBlue_ede2e8a97ced4beb86bde6752ae5cfab.jpg);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(255,255,255, .1);
    transition: opacity 0.6s;
}

.container:hover .overlay {
    opacity: 1;
}

兩個重要的部分是定位和過渡。 疊加必須絕對定位以在同一級別（其“兄弟”）上呈現元素。 我們將不透明度設置為0，但是當父級覆蓋時將其設置為1。

然后，只要不透明度發生變化，我們就告訴它運行轉換。