How to change the appearance of another class when hovering on an img?

[benufo]

Hi,

I’m currently trying to build my website with only a basic knowledge of HTML / CSS.

http://www.ufo.studio

I’m trying to set up the CSS so that when the user hovers over the main case study images on the home page the <title> and <tags> display with an underline.

Here is a section of the HTML for one block on the home page:

—

<div>
<a href="/projects/asos_creates.html">  
       <img src="img/home/ASOS_home.gif" />

           <title class="wow animated fadeIn">ASOS Agency Brand Identity</title>

          <tags class="wow animated fadeIn">Strategy, Art Direction & Design</tags>
</a>
</div>

—

Ideally if the user hovers over the img then the underlines will appear under the title and tag at the same time too.

Is this possible using CSS? Any help greatly appreciated..

thanks so much.
Ben

[Paulie_D]

A minimal Codepen Demo would be appreciated but <title> and <tags> aren’t standard HTML elements in the body of a page….so I’d start there.

[I.m.learning]

Without seeing code:
Create your anchor like normal, add an ID to that anchor, then use that ID to set a hover effect.

In the css use: #yourID a:hover (your options separated by/ending with semicolon)

As Paulie stated, make sure you are using valid elements.

[Paulie_D]

http://codepen.io/Paulie-D/pen/akAXgR

[Beverleyh]

Using your current markup, and assuming you correct those invalid title and tag elements (switch them for spans maybe?), you can use the general sibling selector (~) and the universal selector to target both elements together;

img:hover ~ * { 
/* your styles here */
 }

You might want to consider adding a class to your img element though so that you can target just the images with this specific hover effect (rather than all images, which the above example is currently doing);

.class-on-img:hover ~ * { 
/* your styles here */
 }

[Beverleyh]

Paulie beat me to the punch! I obviously need to work on my thumb dexterity (currently on mobile) ;)

[benufo]

Thanks guys! really appreciate all of these answers.. only thing I forgot to mention is that I don’t want the underline to appear under the image! I will try out the answers above now though and hopefully can get it working. thanks so much!

Ben

[Author]

Posts