[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

[Zed]

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.

[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