Emulate Promo Bar using Full Width Text Box

[lazydays]

Hi Guys,
I have tried to emulate a custom promo bar (i.e.: linking to a different URL to my main Promo Bar). I need this for just one page of my site, see: http://lazydaystest.lazydays.ie/vintage-vw-wedding-car-hire/
I have managed badly to create something that works sort of but wondered if you can help with the following:
1) Get the link text and arrow icon to change colour at the same time on hover.
2) Can the bg-colour of the containing full width text box be changed on hover to emulate the look of my main promo bar that appears on every other page of the site.

The badly wirtten CSS I have used so far is as follows:
.weddingPromo {
padding-top: 33px;
padding-bottom: 29px;
}
.weddingPromo a {
font-family: “Roboto Slab”, san-serif;
font-size: 26px;
line-height: 46px;
color: #ffffff !important;
font-style: italic;
}

.weddingPromo .sf-icon-icon-one.sf-icon-cont, .sf-icon-icon-one > i, i.sf-icon-icon-one {
color: #ffffff;
vertical-align: middle;
}
.weddingPromo a:hover, .weddingPromo a:hover > i {
color: #1f8a70 !important;
}

Fingers crossed you can help or come up with a better way of doing it!
Thanks
Sue

[David Martin – Support]

Hi,

Where is the bar on this page? Please add a screenshot: http://lazydaystest.lazydays.ie/vintage-vw-wedding-car-hire/

Thanks.

[lazydays]

Hi David,
It’s the big green full width text block that says “Check Availability & Pricing >”, see attachment.
Sue

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.asset-bg.alt-two:hover {
    background-color: #000 !important;
}
.weddingPromo a{
transform:none !important;
}

Thanks
Mohammad

[lazydays]

Thanks Mohammed,
That has worked a treat. I even added the transition fade 🙂
One last Q: Is there a way to hide the down arrow graphic that is part of the full width text box? Either thide or get it to change coor too…?
Fingers corssed,
Sue

[Mohammad – SUPPORT]

Hi,
Please use this custom css code also:-

.weddingPromo:after{
    display:none !important
}

Thanks
Mohammad

[lazydays]

Hooray! That all works beautifully.
Thanks Mohammad I am very grateful for your help 🙂
Sue

[Mohammad – SUPPORT]

Hi,
Glad to help you.
Mohammad