css - 悬停时颜色叠加

Question

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

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

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

1. 在悬停时添加颜色叠加(一个简单的 a.entry-link:hover 不起作用)
2. 在鼠标悬停时为图像添加缩放效果

任何帮助将不胜感激。

提前致谢。

<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

1. 您的 <a> 标签不包含您要更改的任何元素，因此悬停不会影响它们(<img> 和 <h2> 中的文本都存在于父 <article> 标签中 - 您可能想要放置文章标签上的 :hover ，并更改内部元素(即 article:hover div.entry-header { background: rgba(0,0,0,0.5); } )

2. 至于缩放 - 与 1 相同，您可以通过悬停父元素来更改宽度/高度。不要忘记，如果您想获得“缩放”效果，您可能还想更改位置(左侧和顶部)。

下次请在此处提供代码，而不是作为链接。它将更容易提供帮助，并且将来也将可用。