Hi, How can i change colour when mouse hover?
I tried to add custom class to icon and text, but colour change only on icon or text. How can I change the colour of all the bric in the column?
Use a card bric to create your content. Select the card on the left layer tree. Over on the right of the screen, add a class named card-link. Click on the class to open the class editor. Select the hover state and change the background colour and the text colour to how you want the card to appear when hovering.
Here is an example:
If the card needs to link to a page, target or URL, select one of the items in the card (maybe the icon) and add an interaction to it. You would then add the class stretched-link to the item. This will make the whole card into a link. Doing this will mean you will have to set the hover colour of the link separately in the stretched-link class.
See it in action HERE.
Thanks! I will try it
I tried it, but when I hover the card, only text change colour, not the icon
I Used same backgroud, but different text colour when mouse hover in the card class
check this gif
Is the icon set as an interactive link? i.e. if it’s clicked the visitor is sent to another page. If this is the case, you have to set the hover colour for the icon separately as I mentioned in my previous post. The solution I offered will simply change the colour of everything (including the icon) when someone hovers a mouse pointer over the card. However, my assumption is that having this hover effect is supposed to signify that something will happen if the site visitor clicks the card. If you have set the icon to be the link, then it will be unaffected by the card-link class - the stretched-link class will take precedence. You will have to select the link (the icon) and change the hover state of the icon by either creating a new class for it or, if you’ve used the stretched-link class to make the whole card clickable, you can change the hover colour of the icon in that class. Be sure to add the correct class to the correct element as shown below.