How to get a different hover image on top of link?

  • Hello,

    The page I’m working on is
    https://51stokescroft.com.gridhosted.co.uk/

    On my home page image-links, I can’t get another image to show up (which is a dimmer version of the original picture) when hovered over..

    Code for the row of images with CSS below..

    <div id="home-links" class="homelinks">

	<ul id="menu-images">

           <li class="Bar"><a href="https://51stokescroft.com.gridhosted.co.uk/bar"><img src="https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/bar11.jpg" alt="Bar" height="220" width="320"></a></li>
	  <li class="Restaurant"><a href="https://51stokescroft.com.gridhosted.co.uk/Restaurant/"><img src="https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/restaurant.jpg" alt="Restaurant" height="220" width="320"></a></li>
        <li class="Party-Bookings"><a href="https://51stokescroft.com.gridhosted.co.uk/Party-Bookings/"><img src="https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/party.jpg" alt="Party Bookings" height="220" width="320"></a></li>

    </ul>    

</div>

    CSS:

    #menu-images {
  clear: both;
  list-style-type: none;
  list-style-image: none;
	text-align:center;
	margin: 0 auto;
	width: 100%;
}

#menu-images ul {
    display: inline-block;
    margin: 0 0 0 0;
    padding-left: 1em;
}

#menu-images li {
  display: inline;
  padding: 0 2em 0 0;
}

#menu-images li a {
    line-height: 1em;
    padding: 0 3;
    text-decoration: none;
}

.Party-Bookings li a: hover {
  	background-image: url(https://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/party-faint.jpg);
}

    Thanks a lot in advance for your help!
    Domi ??

Viewing 6 replies - 1 through 6 (of 6 total)

  • I’m sorry but it is really beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead. In the meantime, try using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.
    https://getfirebug.com/

    Thread Starter domdomdom

    (@domdomdom)

    oh.. okay. I’m new, I thought that’s what this support forum was here for, there seem to be a few css problems solved here. I tried using developer tools but am stuck, but will try css-discuss. Thanks.

    what you have won’t work as the original image is not a css property…

    You can either:
    A. (easiest and best solution):
    #menu-images li img:hover {
    opacity:0.6;
    }

    Change the value of opacity 1 being full down to 0 invisible.

    B:
    Move all of the images <img /> tags into background properties for the LI

    Thread Starter domdomdom

    (@domdomdom)

    Ok thanks Peter, I’ll try these options now! Really appreciate it, thanks again ??

    Thread Starter domdomdom

    (@domdomdom)

    Great, I like the opacity option- thank you! Is there some way I could add text to the hovered over image?

    Since you appear to be struggling with general CSS use, a dedicated CSS resource night be better for you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to get a different hover image on top of link?’ is closed to new replies.