Return to previous page

Banner with text – hover - by jomiketen

This topic has 6 replies, 4 voices, and was last updated 3 years, 8 months ago ago by Rose Tyler

jomiketen

Participant

October 11, 2017 at 23:56

Hi, i’m trying to have a hover effect on the banner with text module of the visual composer, but i’m completely lost.
I would like it to look more or less like this site https://www.marinelayer.com/
the part that says new guy and new gals. It has this overlay effect that i already accomplish, but i would like the effect on the text as well. i hope you can help me. Or something like the last section that on hove it changes the color of the text as well.

#174875 Copied

5 Answers
Rose Tyler

Support staff

October 12, 2017 at 08:54
Hello,

You may use custom css code, for example, try to add this code in Theme Options > Styling > Custom css:
```
.home .banner .banner-subtitle:after {
    content: '';
    display: block;
    height: 3px;
    background: black;
    position: absolute;
    left: 15px;
    top: 45%;
    width: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.home .banner:hover .banner-subtitle:after {
    width: 34%;
}
```
https://gyazo.com/374db904f98131cb84cf7548af7a5a16

Regards
#174901 Copied
jomiketen

Participant

October 12, 2017 at 16:56

ohhhh, it worked perfectly. Thanks 😀

#174994 Copied

Amzy Leel

Participant

October 13, 2017 at 05:43

You are welcome.

Do not hesitate to ask if you have any other questions (in new post / topic )

Regards,

#175020 Copied

Damilare

Participant

March 14, 2021 at 18:46

Hi,
have been trying to create hover effect on the banner with text module ..that will look exactly https://xstore.8theme.com/demos/organic/..( the row where we have vegitable, Yogurt,fruit.) i would be glad if you help out

#279272 Copied

Rose Tyler

Support staff

March 15, 2021 at 08:05

Hello Damilare,

Here are settings from the demo – http://prntscr.com/10m0onp http://prntscr.com/10m0oyb http://prntscr.com/10m0p5m http://prntscr.com/10m0pcw

Regards

#279293 Copied
Tagged: banner, hover, themes, woocommerce, wordpress
Viewing 6 results - 1 through 6 (of 6 total)