Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #244813
    benufo
    Participant

    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

    #244815
    Paulie_D
    Member

    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.

    #244835
    I.m.learning
    Participant

    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.

    #244836
    Paulie_D
    Member
    #244837
    Beverleyh
    Participant

    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 */
     }
    
    #244838
    Beverleyh
    Participant

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

    #244840
    benufo
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.