Adding Hover Effect to Clickable Column

Support
#1

Hi there,

I’m wanting to add a hover effect to a column that is also a clickable link. This is an example of what I’m going for: https://www.mountmadonna.org/ You have to scroll down to the “Many Ways to Grow” section of the page.

So far, I’ve made the column a clickable link but can’t figure out how to get the column to change backgrounds and to increase in z-index so it creates an overlay on the contents of the column similar to the example shown above.

To make the column clickable, I used the instructions here: https://theme.co/apex/forum/t/making-a-column-clickable/1728

The page I’m working on is here: http://87f.c2e.myftpupload.com/rsmtt-events/

Thanks for any advice you can give!

#2

Hello @BodhiJames,

Thanks for writing in!

The given url is a heavily modded column structure which is why it has a unique hover effect. You may not be able to achieve it using the X columns.

With the current set up, we can only make use of this custom css:

.x-section > .x-container > a:hover [class^="x-bg"],
.x-section > .x-container > a:hover > .x-column{
    background-color: teal;    
}

.x-section > .x-container > a:hover > .x-column .x-text,
.x-section > .x-container > a:hover > .x-column .x-text *{
    color: white !important;
}

.x-section > .x-container > a:hover > .x-column .x-image {
    opacity: 0.65;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

#3

Cool, that’s helpful, thanks Rue!

Do you think I could use this same code but add a transparent background image as an overlay instead of a color, using the background-image property and center it so it remains responsive in terms of positioning?

#4

Hello @BodhiJames,

You’re welcome. It’s good to know that the code works for you.

The code will change the background color as you hover over the column. It does not create an overlay. In the code, as you hover the column, the image opacity were set to 65% so that you can see the background color behind it. It you want an overlay, it would need a different custom css.

Hope this helps.

#5

Thanks Rue!

One other question, I’m trying to add a transition-duration to the hover effect to soften the transition to teal, but I don’t seem to be able to get it to work for the bottom half of the column with the teal background, only for the part of the column with the image in it. Below is the css I am using, any thoughts on adjustments?

Thanks as always for the excellent support.

.x-section > .x-container > a:hover [class^=“x-bg”],
.x-section > .x-container > a:hover > .x-column{
background-color: teal;
transition-duration: .65s !important;

}

.x-section > .x-container > a:hover > .x-column .x-text,
.x-section > .x-container > a:hover > .x-column .x-text *{
color: white !important;

}

.x-section > .x-container > a:hover > .x-column .x-image {
opacity: 0.65;
transition-duration: .65s !important;
}

#6

Hello @BodhiJames,

To add a transition, please use this code instead:



.x-section > .x-container > a:hover [class^="x-bg"],
.x-section > .x-container > a:hover > .x-column{
    background-color: teal;    
}

.x-section > .x-container > a:hover > .x-column .x-text,
.x-section > .x-container > a:hover > .x-column .x-text *{
    color: white !important;
}

.x-section > .x-container > a:hover > .x-column .x-image {
    opacity: 0.65;
}

.x-section > .x-container > a:hover [class^="x-bg"],
.x-section > .x-container > a:hover > .x-column,
.x-section > .x-container > a:hover > .x-column .x-image {
	transition: all 2s ease;
}

We would loved to know if this has work for you. Thank you.

1 Like
#7

That worked great!

For some reason it doesn’t seem to be working on the second column of the pair, the second one is holding to a 2s transition even though I set the other ones to .2s using the css you provided above.

Any thoughts on what I need to add to make the columns to the right match?

#8

Hi,

I checked and can see you have different duration, please check style field of your column elements and make sure the durations are the same

Thanks

#9

Well spotted… I made the durations the same but was still running into the problem so clicked the “Advanced” checkbox by the background color on all columns and now the hover effect works the same across them all, so I think I’m good.

#10

Great News.
It’s good to know that the transition is working correctly now.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.