logo, how to on hover show the below image

Forums » WordPress » Mantra » How To

  • Author
    Posts
  • July 25th, 2013 at 00:19 #9711
    Pantelis

    hi!
    thanks in advance and thank you for your wonderful theme!
    i ve got an image for the logo of the site that it is 212×200. i want when i put the mouse over to show instead of the first part of the image the second part that it is on 100px (from top):
    on the previous site i had this code and it was working:

    #logo {
	background: url(img/logo.png) no-repeat;
	display: block;
	width: 212px;
	height: 100px;
	position: absolute;
	left: 26px;
	top: 10px;
}
#logo:hover {
	background-position: 0 -100px;
}

    where should i go and put the “:hover {}” so it can work here also with mantra theme?
    thanks

    July 26th, 2013 at 17:17 #9824
    Zed
    Cryout Creations mastermind

    With Mantra it’s a bit trickier.

    Start by creating a fully transparent empty 210x100px PNG image and set it as your logo in Mantra.

    Then upload your dual-version logo image someplace on your site/server, and add this custom CSS:
    a#logo img { background: url(/path-to-your-dual-version-logo/dual-logo.png) top center no-repeat; }
    a#logo:hover img { background-position: 0 -100px; }

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    July 29th, 2013 at 21:12 #9974
    Pantelis

    thanks! i knew it that it was something like this…but didn’t think it the way you present it to me. all the best.. !!!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘logo, how to on hover show the below image’ is closed to new replies.