Colour overlay on hover

Question

I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category.

I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it, and setting it to 100% height).

How do I go about the following with this set up:

1. Adding a colour overlay on hover ( a simply a.entry-link:hover doesn't work)
2. Adding a zoom effect to the image on hover

Any help would be much appreciated.

Thanks in advance.

<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>

And the 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. Your <a> tag doesn't contain any of the elements you want to change, so the hover will not affect them (both the <img> and the text in <h2> exist in the parent <article> tag - you might want to put the :hover on the article tag, and change the inner elements (ie article:hover div.entry-header { background: rgba(0,0,0,0.5); })

2. As for the zoom - same with 1, you can change the width/height with the hover of the parent element. Don't forget that if you want to have "zoom" effect you might want to also change the position (left and top).

Next time please provide the code in here and not as a link. It will be much easier to help and will also be available in the future.