如何在网格中点击背景图像？

Question

I have a grid of images as my home screen with text layered over them. It is in a grid that has a minimum height requirment for rows, but it doesnt have a maximum. The colums are just a fraction of the whole screen size so they do not have set width. This is where I am stuck, how do I make them linkable without knowing the size of them? Thank you!

HTML

<div class="grid">

    <div class="f f1" href="me">
        <div class="t">
            <h3>Scum Fuck Flower Boy</h3>
            <p>Tyler the Creator</p>
        </div>
    </div>

    <div class="f f2">
        <div class="t">
            <h3>No Dope on Sundays</h3>
            <p>CyHi da Prynce</p>
        </div>
    </div>

    <div class="f f3">
        <div class="t">
            <h3>The Life of Pablo</h3>
            <p>Kanye West</p>
        </div>
    </div>

    <div class="f f4">
        <div class="t">
            <h3>Kanye and Kim have a kid</h3>
        </div>
    </div>

    <div class="f f5">
        <div class="t">
            <h3>My Beatutiful Dark Twisted Fantasy</h3>
            <p>Kanye West</p>
        </div>
    </div>

</div>

CSS

.grid { 
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
margin: 30px 150px 30px 150px;
position: relative;
}

.f {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}

.t {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
margin-bottom: 10px;
}

.t h3 {
color: white;
position: relative;
font-size: 2rem;
font-weight: 500;
font-style: bold;
padding-left: 15px;
}

.t p {
color: white;
position: relative;
font-size: 1.2rem;
font-weight: 400;
padding-left: 15px;
}

.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/tyler.jpg");
}

.f2 {
grid-column: 3/4;
grid-row: 1/2;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/dope.jpg");

}

.f3 {
grid-column: 3/4;
grid-row: 2/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/kanye.jpg");

}

.f4 {
grid-column: 1/2;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/selfie.jpg");

}

.f5 {
grid-column: 2/3;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), 
url("/images/album/fantasy.jpg");

}

Answer 1

A purely CSS HTML method would be to add a cover anchor element:

<div class="f f1">
    <div class="t">
        <h3>Scummy Flower Boy</h3>
        <p>Tyler the Creator</p>
    </div>
    <a class="overclick" href="/url/to/go/somewhere">Some google happy text</a>
</div>

Add this to the .f class to give it a base:

.f {
    ...
    position: relative;/* shouldn't affect your grid */
    }

And then the special css for the anchor would be simply:

a.overclick {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    text-indent: -999em;/* to hide its text from humans, but google is still happy */
    }
    a.overclick:hover {
        /* this just lightly fades when you hover, can be excluded */
        background-color: #fff;
        opacity: 0.12;
        }

That creates an anchor link element that 'fills' each f div, so when you click in it, it goes somewhere. But you dont see it visually, its just there. We've used this on some sites that dont want javascript to handle click events in this fashion.

---

Now, a javascript method using a jQuery method. Add this to your divs of class f:

<div class="f f1" goto="/url/to/somewhere">
     ...
</div>

And then the script block:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        $(".f").click(function(e){
            window.location = $(this).attr('goto');
        });
    });
</script>