Image and Text hover at the same time

Design help General
1

Hi Everyone

On the Services page, I would like to hover over the image or text and for both to be highlighted and selected at the same time.

Could anyone help me with this?

Here is my site Read-Only: https://preview.webflow.com/preview/the-monitoring-centre?utm_medium=preview_link&utm_source=designer&utm_content=the-monitoring-centre&preview=d7a26ad669a68575555548206ad37179&pageId=60d94fe1cc841171ef2d94ff&workflow=preview

2

I don’t think you can do this with native Webflow hover styles.

However you can create an interaction on the parent Service Link class that changes both the child image and text elements. Be sure to use the “Only affect children with this class” setting so you don’t change styling of other child and text elements on the page.

It is also possible to do this via custom code, using CSS of the form:

.parent:hover .child1 {some styling}
.parent:hover .child2 {some more styling}
3

Hi Sam, Could you help me a bit more with this? I’m new to webflow. Could you create instructions or step-by-step?

4

Hi Sam, Could you help me a bit more with this? I’m new to webflow. Could you create instructions or step-by-step?

5

Hello :smile:,

I think I can help you with this. I think I have a nice and pretty simple solution for you. I went ahead and recorded a video to make it easy as possible to follow, which you can watch by clicking the link below. I know when you’re just learning CSS, it can be a lot to absorb, so hopefully this will really help make things easier.

Watch video here: Add Custom Hover Styles to Children

All the best,
– Noah