Return to previous page

Banner with text – hover - by jomiketen

This topic has 6 replies, 4 voices, and was last updated 3 years, 11 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)