悬停时颜色叠加

Question

我正在我的博客上玩一个自己开发的主题。我有一个图像网格，可以点击进入特定类别。

我在尝试在图像上创建悬停效果时遇到问题。我想可能是因为我使用 link 的方式（绝对定位，并将其设置为 100% 高度）。

如何使用此设置执行以下操作：

在悬停时添加颜色叠加层（一个简单的 a.entry-link:hover 不起作用）
悬停时为图像添加缩放效果

如有任何帮助，我们将不胜感激。

提前致谢。

<div class="post-list">

    <div id="articles">
        ::before
        <article>
            <div class="entry-thumbnail">
                <img src="http://localhost:8888/defylife/assets/images/posts/piste_temp.jpg"></img>
            </div>
            <!--

             entry header 

            -->
            <div class="entry-header">
                <h2>

                    Morocco 2015

                </h2>
            </div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/morocco/"></a>
        </article>
        <article>
            <div class="entry-thumbnail">
                <img src="http://localhost:8888/defylife/assets/images/posts/gpz_romania_thumb.jpg"></img>
            </div>
            <!--

             entry header 

            -->
            <div class="entry-header">
                <h2>

                    Norwich - Mamaia

                </h2>
            </div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/norwich-mamaia/"></a>
        </article>
        <article>
            <div class="entry-thumbnail">
                <img src="http://localhost:8888/defylife/assets/images/posts/P6070238.jpg"></img>
            </div>
            <!--

             entry header 

            -->
            <div class="entry-header">
                <h2>

                    Norwich - Split

                </h2>
            </div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/norwich-split/"></a>
        </article>
        <article>
            <div class="entry-thumbnail"></div>
            <!--

             entry header 

            -->
            <div class="entry-header"></div>
            <a class="entry-link" title="View all posts in " href="http://localhost:8888/defylife/category/adventures/spain/"></a>
        </article>    
    </div>

和 CSS:

body.category .post-list #articles {
    width: 100%;
    padding: 0px;
    display: table;
    margin: 0px;
}

body.category .post-list #articles article .entry-thumbnail {
    display: block;
    width: 100%;
    max-height: 431px;
    overflow: hidden;
    margin: auto;
}

body.category .post-list #articles article .entry-thumbnail img {
    width: 100%;
}

body.category .post-list #articles article {
    display: inline;
    width: 33.3333%;
    margin: -6px 0px 0px; /* this is due to a small gap between rows */
    position: relative;
    float: left;
    text-align: center;
}

body.category .post-list #articles article .entry-header {
    z-index: 100;
    position: absolute;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    left: 0px;
    right: 0px;
    bottom: 5px; /* this is because for some reason there are gaps between rows */
    background: rgba(0, 0, 0, 0.25) none repeat scroll 0px 0px;
    padding: 15px;
}

body.category .post-list #articles article .entry-header h2 {
    font-size: 0.85em;
    text-transform: uppercase;
}

body.category .post-list #articles article .entry-link {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    border-bottom: 0px none;
    height: 100%;
    z-index: 100;
    opacity: 0;
}

Answer 1

您的 <a> 标签不包含您要更改的任何元素，因此悬停不会影响它们（<img> 和 <h2> 存在于父 <article> 标签中 - 您可能希望将 :hover 放在文章标签上，并更改内部元素（即 article:hover div.entry-header { background: rgba(0,0,0,0.5); }）
至于缩放 - 与 1 相同，您可以通过悬停父元素来更改 width/height。不要忘记，如果您想要 "zoom" 效果，您可能还想更改位置（左侧和顶部）。

下次请在此处提供代码，而不是 link。帮助起来会方便很多，以后也会有。

悬停时颜色叠加

Colour overlay on hover

css

hover

overlay

css-transforms