Challenges Regarding Columns that have Links with Hover Effects and Buttons

[justinmking]

Hello Support,

I’ve been going through the forums working to get a clickable link on the bg image of a column that has hover effects as well as vertically centered text and a button.

I’ve built a sample page and described the specific issues I’m having which I’ll attach via a secure note below. Let me know if you need backend access and I’ll arrange that.

For reference, here’s the code I’ve been using.

Javascript for making the column bg image into a link, deployed on the specific page:

jQuery(document).ready(function($){
$("#linked-column-1 > div").wrap('<a href="http://google.com/"></a>');
});

CSS for linked columns:

.linked-column > a {display: block; width: 100%; height: 100%; top: 0; left: 0;}

CSS for hover effect:

.linked-column > a:hover {transition: opacity 0.3s ease; opacity: 0.75;}

CSS for vertical align:

.verticalaligncenter .x-container .x-column:last-child {display: flex; align-items: center; flex-direction:column;}
.verticalaligncenter .x-container {display: flex; flex-flow: row wrap; justify-content: center;}

As always, thanks for the support!

[christopher]

Hi there,

Please add a section and inside the Column options click on the Customize tab and add the class of the bglink:

Se the background image for the column.

Then add a Classic Headline element and a Button element. Set the text options there to be centered.

Then add the CSS code below:

.bglink {
  min-height: 300px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

and the Javascript code below:

jQuery('.bglink').on('click', function() {
  window.location.href = 'http://www.google.com';
});

That should do the trick.

I created a page with the same characteristics and made a template of it which you can use:

https://we.tl/Y4lFofG9TW

To know how to use the Cornerstone templates please read the templates section of this article:

Creating Layouts | Themeco Docs

Thank you.

[mwiedmann]

Hi, that’s an awesome workaround!
Any hints how I could make the column to change background color on hovering?

[thai]

Hi There,

Please also add this custom CSS:

.bglink:hover {
background-color: #f0f0f0;
}

Hope it helps

[mwiedmann]

@thai

.bglink:hover {
background-color: #f0f0f0;
}

Great, thanks!
I guess I have to define a new class for each column I want to add a link to; as the link is set in JS. right?

[thai]

Hi There,

You can add the class like this: bglink facebook-url or bglink google-url.

Then the custom JS should be:

jQuery('.facebook-url').on('click', function() {
  window.location.href = 'http://www.facebook.com';
});
jQuery('.google-url').on('click', function() {
  window.location.href = 'http://www.google.com';
});

Hope it helps