Is it possible to apply a css hover effect to both text and an image?

For example, if you were to hover over the text "cat" at the top of the page, an image of a cat at the bottom of the page would get a different border color which would act as a hightlight effect. So that both the text and the image would have a highlight effect.

Not sure if there is a way to do it with onMouseover or something similar.

It's called a disjointed rollover and yes, you can do it with javascript.

Yes you can do this.

It can be achieved as mentioned above using javascript, or you can achieve this by also using different CSS elements at the top and the bottom, and then use the CSS hover effects. Not trying to step on anyone toes, but I personally would recommend that you do the CSS.