Argi Kartika Argi Kartika - 5 months ago 12
HTML Question

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

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

This answer is not mine, but I might as well post it here: http://jsbin.com/fajehokaju/edit?html,css,output

To make it semantic, the author replaced the tags with , and . He also wrapped the whole element in the anchor tag, so it won't be defined twice.

    <article id="ARTICLE_1">
  <a href="http://localhost/youthproactive/2016/05/25/eos-et-exercitationem-corporis-autem-et-molestiae/" id="A_3">
    <figure id="FIGURE_2">
         <img width="1195" height="796" src="http://localhost/youthproactive/wp-content/uploads/2016/05/b5b7e8e2-22d7-3734-bdef-7d0de25972e1.jpg" alt="" id="IMG_4" />
    </figure>
    <!-- entry-thumb -->

    <div id="DIV_5">
        <h2 id="H2_6">
            Eos et exercitationem corporis autem et molestiae
        </h2>
        <div id="DIV_7">
            <span id="SPAN_8"><a href="http://localhost/youthproactive/category/perspektif/" rel="category tag" id="A_9">Perspektif</a></span> <span id="SPAN_10">By <a href="http://localhost/youthproactive/author/admin/" rel="author" id="A_11">admin</a></span>
            <time id="TIME_12">
                May 25, 2016
            </time>
        </div>
    </div>
</a>
</article>

Thank you!