Create a hyperlink to an entire Column

[Jbuckmas]

Is it possible to create a Hyperlink out of an entire column inside of a container? If so, how?

Would like to use the 4 Columns in the middle of the page to link to other pages,
@ http://buckmasterwebs.com

how do I make that happen?

I gave the first Column ID: “FPcol1”
the second column ID: “FPcol2”
etc.
etc.

then placed the following in the CSS:

/* href=“http://buckmasterwebs.com/graphic-design”>FPcol1 */

I’m getting nothing! Any ideas? Obviously with out the /* */

I have used buttons to create a similar effect of what I want to do below the first set of columns.
For several reasons I need to link to the entire column instead using the buttons, I would also
like to create the hover effect over the column

thanks

[Joao]

Hi There,

Please remove the CSS you have inserted as it is not necessary.

Add the following code to Cornerstone JS and adjust the URL.

jQuery("#FPcol1").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#FPcol2").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

Hope it helps

[Jbuckmas]

Thanks Joao

That worked perfect,

Now what JS do I need to add to change the overlay cover when I hover over the column?

[thai]

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.el2 > a:hover {
    opacity: 0.75;
}

Let us know how it goes!

[Jbuckmas]

Thai

Thanks, where do I add the color that I want to use? #000080

[paul.r]

Hi,

Please change the css code with this.

.home .el2 > a:hover > .x-column {
    background-color: rgba(0 ,0,128,0.5);
}

Hope that helps.

[Jbuckmas]

Thanks Paul

The other day, I saw a sight, that appeared to have an overlay on three separate columns, when you hovered over them. Because each column was all text the background could have been what was changed. I’m hoping to have a transparency over the column so that you do not see the white bckground of the pic. with in each column, is that possible?

[nico]

Hi @Jbuckmas,

I believe that this is possible with custom CSS and JS however it would best that you will send us the site URL where you saw the customization for us to have a better picture and idea of the customization.

Thank you so much.