Classic Feature Box - Make a link

Support
#1

http://www.naplesinsurancegroup.com/captive-insurance

We are attempting to make the icons at the bottom of the page where it says “Example Industries We Insure” actually link to a pdf for each respective industry.

This feature element only seems to allow us to create a link to text, which won’t work based on how we have the element formatted to appear in this section.

Can we make the entire icon a link instead?

For example: we want the “Healthcare” icon to link here: http://naplesinsurancegroup.com/wp-content/uploads/2018/04/medical-letter.pdf

Thank you!

#2

Hi rmcgroup,

Yes, you can make the entire icon a link by following these steps:

1- Add a custom class to the Classic Feature Box as in this image:

2- Add this JS snippet to the content JS area:

jQuery(document).ready(function($) {
	jQuery(".healthcare .x-feature-box-graphic").click(function() {
	    window.location = "http://naplesinsurancegroup.com/wp-content/uploads/2018/04/medical-letter.pdf";
	});
});

3- Add this CSS snippet to the content CSS area:

.healthcare .x-feature-box-graphic{
  cursor: pointer;
}

4- Repeat the previous steps for each Classic Feature Box you have. Make sure to change the class name in the code snippets above according to your new item and of course, change the file URL in the JS snippet.

Thanks.

#3

Hello. this helped me. thank you. I’d like to take it further by having a hover feature that fades the image a little. Can’t seem to get the code right.

thx

#4

Hi there,

Please try:

.healthcare .x-feature-box-graphic:hover img {
    opacity: 0.6;
}

Hope this helps.

#5

perfect thx

#6

Hi @azstrel,

Happy to hear that.

Feel free to ask us again.

Thanks.

#7

hi so Ive been tweeking things and would like to have an image on hover instead translucence (code). I will make the image translucent. the problem is the image looks funny now on hover because the background image bleeds through (i have an image set on container bg, not a color). works but i’d like to take it further. Cleaner

thx

#8

Hello there,

You can achieve this by simply following the steps:

  1. Kindly add the following classes below to each of your Classic Feature Box. The order is in reference with the ones we have on the screenshot:

Classes: agriculture, contractors, healthcare, manufacturing, transportation, more

  1. Add this CSS code to Pro > Theme Options > CSS. For your convenience, I’ve also added the icon class names below:
.agriculture .x-feature-box-graphic .x-icon-leaf:before:hover {
    content:"\f368" !important;
}
.contractors .x-feature-box-graphic .x-icon-wrench:before:hover {
    content:"\f05d" !important;
}
.healthcare .x-feature-box-graphic .x-icon-hospital-o:before:hover { 
    content:"\f26e" !important;
}
.manufacturing .x-feature-box-graphic .x-icon-codepen:before:hover { 
    content:"\f26e" !important;
}
.transportation .x-feature-box-graphic .x-icon-truck:before:hover { 
     content:"\f05d" !important;
}
.more .x-feature-box-graphic .x-icon-ellipsis-h:before:hover { 
    content:"\f26e" !important;
}

Then, you can now change the unicode values such as \f05d. List of unicodes can be seen on FontAwesome Icons Documentation.

Hope this helps.

#9

The above method is not working. double, triple checked code placement and correctness of x-icon and FA-unicodes, I read some where that font awesome has to be activated to use? i like the idea that of the fa-link /.x-icon-link appearing on hover to show it is visitable. My original thought was to ad an image of my own, hosted on my server then using an “http…” directory for hover in the css/php. But like the icon idea more. But can’t get either to work.

https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp …Should I add all this code (edited to my needs)? Does X-theme use PHP for editing? If so/not i can’t find where to add Font awesome’s “Add icon library”

https://www.w3schools.com/howto/howto_css_image_overlay_icon.asp

#10

Hi there,

It should be the same, but instead of the unicode, you’ll use image URL.

Like this

.agriculture .x-feature-box-graphic .x-icon-leaf:before:hover {
    content: url(http://naplesinsurancegroup.com/wp-content/uploads/2018/02/02-RMC-Group-PNG-YW.BL_.WT-163-x-62.png) !important;
}

Please try it.

Thanks!

#11

This does not work either.

#12

This is what I’m trying to create within the Custom Feature box image. https://www.w3schools.com/code/tryit.asp?filename=FQF3L5IBXPN4 …remember to press “run”

Cant get it to work on my site. Not sure where to place HTML.

#13

Hi azstrel,

If you want the recent image overlay effect, then please use this code:

.x-feature-box-graphic-inner i {
    background-color:rgba(0,0,0,0);
}

.x-feature-box-graphic-inner i:hover {
    background-color:rgba(0,0,0,0.25)!important;
}

If you want the image overlay effect plus using different icon/image then please use this code “it’s modified than the previous one and it should work fine”:

.x-feature-box-graphic-inner i {
    background-color:rgba(0,0,0,0);
}

.x-feature-box-graphic-inner i:hover {
    background-color:rgba(0,0,0,0.25)!important;
}
.agriculture .x-feature-box-graphic .x-icon-leaf:hover:before {
    content:"\f368" !important;
}
.contractors .x-feature-box-graphic .x-icon-wrench:hover:before {
    content:"\f05d" !important;
}
.healthcare .x-feature-box-graphic .x-icon-hospital-o:hover:before { 
    content:"\f26e" !important;
}
.manufacturing .x-feature-box-graphic .x-icon-codepen:hover:before { 
    content:"\f26e" !important;
}
.transportation .x-feature-box-graphic .x-icon-truck:hover:before { 
     content:"\f05d" !important;
}
.more .x-feature-box-graphic .x-icon-ellipsis-h:hover:before { 
    content:"\f26e" !important;
}

Make sure to add the custom classes names.

Thanks.

#14

so i can’t get it to work.

I posted my login details (up after my last post)in a secure note for more help.

thanks

#15

Hi azstrel

When I try to log in your website with these details, that’s what I get:

Could you please check this issue for me?

Thanks.

#16

Okay just checked and it worked. I’m logged out too. I’ll post again what works though…sucker note following…

#18

Hi,

After investigating this issue on your website here, this is the CSS code that I’ve added to your page CSS and I can see it’s working fine:

.x-feature-box-graphic-inner {
    background: rgba(0,0,0,1);
    border-radius: 100em;
}

.x-feature-box-graphic-inner:hover img {
    opacity: 0.75;
}

Thanks.

#19

Yes that is a nicer hover effect. Thank you for your time. :blush:

#20

We are delighted to assist you with this.

Cheers!

#21

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.