Making full div clickable

Hi there,

you can use :pseudo elements to increase the click area of an <a>
For example:

/* The post <article> needs to be the closest relatively positioned element */
.single-tile {
    position: relative;
}

/* then the a:before pseudo can be abs positioned to the article container */
.tile-title a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
}

Hi there,

Would something like this help?
https://www.labnol.org/code/19639-turn-div-clickable-link

Another possible solution here:
https://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript

This isn't a theme related question so definitely worth trying a few solutions available on Google.

Hello Both,

Really like the idea that David suggests of making the <a> fill the div using CSS.

I have sort of managed to accomplish it...

Problem being I now cannot get my text to be horizontally center aligned in the div.

In order to get as far as I have got I ended up putting the <a> tag outside the <h2> tag rather than within as it was previously.

Any ideas?

Mike

Heres a simple HTML example for using the pseudo elememt to enlarge the click area:

<div class="my-container">
    <h2 class="my-title"><a href="#" class="my-title-link">The Title</a><h2>
</div>

And the CSS:

/* Relative positioned container */
.my-container {
    position: relative;
    min-height: 400px;
    background-image: url('my-image.jpg');
    /* Flex for centering */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Create pseudo element on link */
/* Absolute positon over container */
.my-title-link:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0;
}

/* BONUS: Add hover overlay effect to pseudo */
.my-title-link:hover:before {
    opacity: 0.2;
} 

Hello,

Many thanks for that!

Used your above code to full effect except changed the min-height: 400px; to height: inherit; so it would get its height from the above div, meaning if I ever want to make them longer or shorter I can do so easily without changing in two places!

Many thanks for the help, really appreciated!

Mike

Glad to be of help :)

Hi David,
Came across this discussion and tried to use the CSS on a test page, using GB beta 4.
I get the hover effect, but nowhere is clickable - any clues ?
The link looks OK when I view the source code!
It's the 'Hi there mate' block
https://dave.computer/play/

TIA, Dave

ps - Update: I took out:
content: '';
That made the heading clickable, but not the whole block!

Hi there,

use the code i provided above but with the following 2 changes:

Change:

/* Create pseudo element on link */
/* Absolute positon over container */
.my-title-link:before {

to:

/* Create pseudo element on link */
/* Absolute positon over container */
.my-title-link a:before {

And change:

/* BONUS: Add hover overlay effect to pseudo */
.my-title-link:hover:before {

to

/* BONUS: Add hover overlay effect to pseudo */
.my-title-link a:hover:before {