Customizing the icon box background image on hover

[Jackcoldrick]

Hi Guys,

I am having a bit of trouble modifying the icon boxes. I’d like to permantely show the crease.svg image as the background and not only on hover. How can I do this?

This is my HTML:

<div class="container">
    <div class="col-md-12">
        <h2>Get in Touch</h2>
        <p>Get Started Now!</p>
    </div>
    <div class='col-md-12'>
        <div class='col-md-4'>
            <div class="sf-icon-box sf-icon-box-standard sf-animation sf-icon- " data-animation="fade-in" data-delay="200" style="opacity: 1;">
                <div class="sf-icon-cont cont-small sf-icon-float-none sf-icon-">
                    <i class="ss-man sf-icon sf-icon-small"></i>
                </div>
                <div class="sf-icon-box-content-wrap clearfix">
                    <div class="sf-icon-box-content"><a href='#'>Contact Us</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

I tried adding the sf-hover class to the above html but it gets turned off when the user hovers over the item. Basically I just want to have sf-hover permantely on for those icon boxes.

Can you advise on how to do this? Ideally I’d just like to target the above, I don’t want the background image permantely applied to every box on the site.

thanks,
j

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide us a link to where you have the icon box?
so you want it to be always with the hover state?

-Rui

[Jackcoldrick]

Hi Rui,

Yes I want it to constantly be on hover state. I don’t have a link as the site isn’t live yet.

[Rui Guerreiro – SUPPORT]

Can you tell(take a screenshot) me from our demo site what element you want to do that to check if it’s possible or not.

Icon Boxes

-Rui

[Jackcoldrick]

Hi Rui,

screenshot is attached.

I’d like to keep the crease.svg which appears in bg there all the time. I believe the sf-hover class is responsible for this.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

The basic CSS would be this:

.sf-icon-cont {
	background-color: #4ad1e5;
}

.sf-icon-cont {
	background-image: url(images/crease.svg);
}

You could modify that to limit it to a page id, or section with the page as the above is global.

Thanks,
David.

[Jackcoldrick]

Thanks for the help guys. That worked fine.

[Rui Guerreiro – SUPPORT]

Great. Thanks David.
-Rui

[David Martin – Support]

Great, happy to help.

– David.