Semantically correct way to place an anchor tag to cover an element

Question

I am trying to place an anchor tag displayed as a block to cover an entire element which contains an image, some texts and some other links. As for now, I'm trying to find the right way to place the anchor tag so it wouldn't be left empty without any content to wrap, but still wrapping the texts inside and not covering the other links.

I've tried various ways, such as placing it to wrap the H2 element (it doesn't work since their positions are different, the result was a mess and it won't cover the image), wrap it around the content element (semantically incorrect since the content element contains other links, there were lots of incorrectly rendered anchor tag everywhere), left it empty inside the content element (doesn't work either because it won't cover the whole image as it is not their direct children) and left it empty outside the content element (doesn't work as well because the title and the description are not by the anchor tag, thus are not clickable).

The solution I came up with for now was to delete the content wrapper and place the empty anchor tag along with the texts and the other links directly as the .entry children, but that way the texts would not be aligned properly and the height of the :before: and :after elements I used to style the hover effects will not be restricted to the content as it is now. I've also tried to move the other links outside the content wrapper as to make it wrapped under the same parent with the anchor, but I'm clueless about its positioning.

JSFIDDLE: https://jsfiddle.net/qbppubbx/6/

HTML:

<ul>
                <!--ditambahkan deskripsi, tapi berat. animasinya pakai css3, saya gagal jquery orz-->
                <li class="opinion wrapper">
                    <div class="opinion container">
                        <div class="entry entry-1" style="background-image:url(img/contohgambar.jpg);">
                            <a href="" title="" class="article link"></a>
                                <div class="opinion content">
                                    <h2 class="title">I have here two pledges that I shall yet slay Moby Dick and survive it. </h2>
                                    <span class="details">
                                        <a href="/test" title="" class="author">Nama Penulis</a> /
                                        <a href="/date" title="" class="date ">Tanggal Penulisan</a>
                                    </span>
                                    <p class="description hide-text">
                                        Both were silent again, as one man. The grey dawn came on, and the slumbering crew arose from the boat's bottom, and ere noon the dead whale was brought to the ship.
                                    </p>
                                </div>
                        </div>
                    </div>
                </li>
            </ul>

CSS:

.wrapper {
    float: left;
    margin:0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
}

.container {
    position: relative;
    height: inherit;
    overflow: hidden;
}

.opinion.container {
    margin: 15px;
}

.entry {
    height: inherit;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.entry .content {
    position: absolute; 
    bottom: 20px; 
    left: 20px;
    right: 20px;
    text-align: left;
}

.entry > .article.link {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.content .title,
.content .details {
    background-color: #000;
    color: #fff;
    display: inline;
    position: relative;
}

.content .title {
    font-family: "Patua One", "Georgia", serif;
    font-size: 40px;
    font-size: 2.2222rem;
}

.content .details {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 18px;
    font-size: 1rem;
    z-index: 3;
}

.content .details > a {
    color: #505eea;
}

.content .details:before,
.content .description:before {
    content: "";
    display: block;
    margin-top: 10px;
}


.content .description {
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 14px;
    font-size: 0.7778rem;
    font-style: italic;
    color: #f1f1f1;
    opacity: 0;
    position: relative;
    width: 95%;
    z-index: 1;
    line-height: 1.5;
}


.opinion.content:before, 
.opinion.content:after{
    position: absolute;
    content: "";
    width: 0;
    opacity: 0;
    z-index: 0;
}


.opinion.content:before {
    top: -10px;
    right: 10px;
    height: 110%;
    background: #000;
}

.opinion.content:after {
    border: 3px solid #ffe400;
    bottom: 0;
    height: 105%;
    right: 0px;
    background: transparent;
}

.hide-text {
    height: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.opinion.container:hover .content .title,
.opinion.container:hover .content .details {
    background-color: transparent;
}


.opinion.container:hover .content .title {
    color: #505eea;
}

.content .details > a:hover {
    color: #fff;
}

.opinion.container:hover .content .title,
.details a:hover {
    transition: 0.25s ease-in-out;
}

.opinion.container:hover .opinion.content:before {
    opacity: 0.9;
}

.opinion.container:hover .opinion.content:after,
.opinion.container:hover .content .description {
    height: 100%;
    opacity: 1;
}

.opinion.container:hover .opinion.content:after {

}

/*timing animasi*/
.opinion.content,
.opinion.content:before,
.opinion.content:after,
.opinion.container:hover .content .title,
.details a:hover,
.opinion.container:hover .content .description,
.opinion.container:hover .opinion.content:before,
.opinion.container:hover .opinion.content:after {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}


/*efek geser dari kiri ke kanan*/
/*initializing*/
.opinion.content:before,
.opinion.content:after {
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

/*on hover*/
.opinion.container:hover .opinion.content:before,
.opinion.container:hover .opinion.content:after {
    width: 115%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


/*efek geser dari atas ke bawah*/
/*initializing*/
.opinion.content {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*on hover*/
.opinion.container:hover .opinion.content {
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}


@media (min-width: 1280px) {

    .home.container {
        max-width: 1200px;
    }

    .wrapper {
        height: 618px;
    }

    .opinion.card.container:hover .opinion.card.description {
        width: 90%;
    }

    .wrapper {
        display: inline-block;
        width: 33.3333333%;
    }

    .opinion.wrapper:first-child {
        width: 66.66666666666%;
    }

}

Thanks for the help!

EDIT: The other solution I came up for now was to create another anchor tag and place each one of them in the .entry element and the text wrapper (.content). That way, both the image and the texts will be covered. I originally don't want to use this method since it means the same anchor tag will be used/mentioned twice, and I'm not sure whether it will be semantically correct or not. As for now, I'm still waiting for other suggestions to come.

JSFIDDLE: https://jsfiddle.net/wq6tje6g/1/

Answer 1

This solution is not mine, but I might as well post it here:

http://jsbin.com/yifozizaju/edit?html,css,output

<article class="post-57 post type-post status-publish format-standard has-post-thumbnail hentry category-perspektif">
    <div class="entry-thumb">
        <a href="http://google.com"><img width="1108" height="738" src="http://lorempixel.com/1108/738/" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /></a>
    </div>
    <!-- entry-thumb -->
    <div class="entry-head">
        <h2 class="entry-title">
          <a href="http://google.com">Iusto labore non et</a>
        </h2>
        <div class="entry-meta">
          <span class=""><a href="http://asu.com" rel="category tag">Perspektif</a></span>
          <span class="byline author vcard"><a href="http://localhost/youthproactive/author/admin/" rel="author" class="fn">admin</a></span>
          <time class="updated" datetime="2016-05-25T12:43:06+00:00">May 25, 2016</time>
        </div>
    </div>
</article>

Thank you!

Answer 2

The Jsfiddle didn't seem to be working, when I changed the z-index on '.entry > .article .link' to 0 it worked fine. It appears to me that the empty link troubles you though and you're looking for a different structure than what's in the jsfiddle. The only other way I can think to accomplish this is to keep everything inside the anchor other than the two anchor tags, keep those outside of the main anchor, but put them in a wrapper with the anchor and set them to absolute.

For exmaple...

<div id="article-wrapper">
    <a href="articlelink.com" class="article">
        <h1>Article Title</h1>
        <p>Article description</p>
    </a>
    <div id="details">
        <a href="author">Author</a>
        <a href="date">Date</a>
    </div>
</div>

article-wrapper{ position: relative; z-index: 0;}

details{position: absolute; z-index: 10;}

Haven't tested this particular code, but you get the idea. Hope that helps.

Answer 3

Like @Arun, am also a little bit confused with your requirement. But based on what I understood, I believe you wanted the whole content(the image and the text) to be having a link to another page. But at the same time, the links inside the details(the author link) should also be working isn't it?

Then why not try adding an z-index value of 9999 or something for that <div class="opinion content">...</div> element?

CSS would be like this:

.opinion.content {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);

  z-index: 99999;  /* <------------- added by Akhilesh */
}

Hope it helps!

JSFiddle Link