Docs

[alamtfuerwerbung]

Hi, coud you pls see this page:
http://www.greiwe-online.de/start.html

There are 6 boxes with green color when hover.
http://ctrlv.in/862185

How can I build something like that with X?

Thx
A

[Jade]

Hi there,

You can create a row with three columns using Cornerstone then add a Featured Box element in every row. As for the hover effect, we can add a custom CSS to it. We could provide you with the code but kindly create the rows first then provide us with the link to your site.

Thank you.

[alamtfuerwerbung]

ok, I´ll check it out, thx

[alamtfuerwerbung]

ok here is the testpage to build it

http://www.sub.amtfuerwerbung.de/test2/

thx for help

[alamtfuerwerbung]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. Let’s add this under Custom > CSS in the Customizer.

.x-feature-box {
  transition: all 0.3s ease 0s;
}

.x-feature-box:hover {
  background-color: #008855;
}

Hope this helps.

[alamtfuerwerbung]

great, thank you.

if u check my sample again, u can see that the font color is also changing when hover.
I tried it with .element.style:hover { color: etc…, but it doesn´t work.
I´m sure that is way to do it, isn´t it?

Thx
Andre

[Rupok]

Hi Andre,

You should be able to add this following the given code. Let’s add this as well :

.x-feature-box:hover .x-feature-box-title, 
.x-feature-box:hover .x-feature-box-text {
  color: #fff !important;
}

Hope this helps.

[alamtfuerwerbung]

perfect thx

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[alamtfuerwerbung]

Hi, further question to this topic.
Can I upload own icons?

In the solution we worked out here, the icon color is changing when hover. If I use own icon´s uploaded as image, I can´t use the hover effect, cause the color of an image can´t be changed automatically.

Thx
Andre

[Christopher]

Hi there,

No, custom icons are not allowed, but you can change icon by adding following code in child theme’s style.css file :

i.x-icon-wpforms.square:before {
    content: "\f16d";
}

Every time you add wpforms icon, instagram icon will be displayed.

Please check the list of available icons here http://fontawesome.io/icons/

Hope it helps.

[alamtfuerwerbung]

thx

[Joao]

You are welcome.

Joao

[alamtfuerwerbung]

Hi, I´m afraid it doesn´t work with i.x-icon-wpforms.square:before {
content: “\f16d”;
}

Or I did it wrong.

After I added it to the style.css I still have the same icons.

Thx
Andre

[Author]

Posts