search

mgsisk / webcomic

Comic publishing power for the web. Turn your WordPress-powered site into a comic publishing platform with Webcomic.
http://wordpress.org/plugins/webcomic
GNU General Public License v2.0
110 stars 29 forks source link

CSS Hover Image for Comic Navigation #180

Closed ghost closed 10 years ago

ghost commented 10 years ago

I'm trying to create hover navigation using CSS, which I've successfully done before with other things, but this one is leaving me stumped.

I followed the instructions in this thread: https://github.com/mgsisk/webcomic/issues/76

The images show up fine and the links work, but when I apply any type of CSS such as a block element that also defines the height and width in order to set up the image hover, my image becomes borked. What am I missing?

You can see the issue on the "First" comic link in the comic navigation on http://ealaionta.com/sz/

mgsisk commented 10 years ago

It looks like there's a style conflict for the link width; you have a width of 10% assigned to .post-webcomic nav a, which is overriding the .first-webcomic-link width of 200px. To fix this, either remove the 10% width (I'm guessing it's redundant anyway), or make the .first-webcomic-link selector more specific, like .post-webcomic nav .first-webcomic-link.

You'll also want to add background-repeat: no-repeat; to the .first-webcomic-link rule. Finally, the background-position seems to be a bit off; try using 50% -39px for the normal state and 50% 0 for :hover.

ghost commented 10 years ago

Thanks again, Michael. I kept overlooking the 10% declaration! Works nicely now.