Hover bg on image banner + click

[Marine]

Hello,

I’ve read your trick to display the text on the image banner only when you are on hover. I’ve done it on my homepage, “nos réalisations” section, to replace the portfolio, and it works perfectly ! I have 2 questions :
– I’ve put a background black with opacity but it comes only behind the text, I’d like it for the whole image while hover (as my texts has different size it will be better)
– How can I add a link behind the image banner block? I’ve tried to add around the shortcode but it doesn’t work. After, I’ve see this but it’s an old post so I don’t know if it’s still the way… http://www.swiftideas.com/forums/topic/image-banner-as-a-link/

Tx for your help !
Marine

[Rui Guerreiro – SUPPORT]

Hi,

Regarding the “nos réalisations” I can’t see the image banner with the opacity, it seems a different asset.
Did you changed it since you created the topic?

-Rui

[Marine]

Hey,

Nope I didn’t change anything. Here is the section I’m talking about, cf print screen. It’s on the homepage.
8 images banners, I’ve removed the margins, and applied Kyle’s trick to display the text on hover (http://www.swiftideas.com/forums/topic/show-caption-on-image-hover).
Then I have those 2 issues.

Tx !!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Thanks for the explanation, I wasn’t understanding.
Can you add this custom css code:

.image-banner-content.content-center {
     padding: 120px 10% !important;
}

html.no-js .sf-animation.image-banner-content, .sf-animation[data-animation="none"].image-banner-content {
    bottom: 0% !important;
}

-Rui

[Marine]

Tx Rui! Is there a way to add a link to each image banner?

[Rui Guerreiro – SUPPORT]

I think so if you add a custom class to each image banner and then use the custom classes in the custom css.

-Rui

[Marine]

Hum, I’m sorry but how can I generate a link via CSS ?
Maybe I should use another Dante’s element but I don’t see which one…

[Marine]

Maybe I could use the image element, with the link. But I’d like to display the caption with an hover on the image, not below…

[Rui Guerreiro – SUPPORT]

Has you can see in my screenshot from your site the last argument in the Image banner shortocode is the extraclass, if you add something it should look extraclass=”custom-class-1″

https://www.dropbox.com/s/05qqjkkef5pfgdu/Screenshot%202017-01-31%2017.08.22.png?dl=0

If you add a different class to each element we target it later with some css.

-Rui