Forums

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

Home Forums CSS Trying to put text over image link

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #149450
    andy1212
    Participant

    Ok I searched on Google first to see if I could find an answer to this question and couldn’t find anything related. So I have a a div with a link inside it and an image inside the link. The divs position is relative. I have another div with text to put over the button and this div is also positioned as absolute. I image link has a hover state so when the cursor hovers over it, the image changes to a darker image.

    The Problem: When I test this out and scroll over the image, the hover works fine, but when I scroll onto the text which is in the middle of the image, the hover reverts back to the original image. How can I get the image link and text to work together so that if someone scrolls over the image or over the text, they both effect the hover so the image changes.

    Here’s my code.

    <div id="trailersmenu">
    <div id="trailerstext" class="menufont2">
    Trailers ▾
    </div>
    <a href="trailers.php" target="_self"><img src="images_folder/header/newheader/buttons/png/new-trailers.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-trailershover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-trailers.png'" width="107" height="55" border="0" alt="Trailers" /></a>
    </div>

    `#trailersmenu { position: relative; float: left; width: 107px; height: 55px; }

    trailerstext {

    position: absolute;
    top: 23px;
    left: 22px;
    text-align: left;
    

    }`

    If I haven’t explained what I’m trying to do clearly, an example would be the buttons on the top menu of css-tricks website, they have text inside the image, you can tell its text and not an image of text because when you click somewhere on the page and drag over a button from the menu, you can select the text inside the button. When you hover over the button, the text and image state work simultaneously and that’s what I’m trying to do. Thanks for your time and help!

    #149475
    Paulie_D
    Member

    Could we ask you to put something in Codepen.io so we can see the problem for ourselves?

    You might want to think about removing the images from the HTML completely and making in the background images in the CSS….it’s actually the right way to do it…well, better at least.

    Like this: http://codepen.io/anon/pen/jqfzp

    BTW…the buttons on CSS tricks aren’t images at all.

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