I have a permanent item on my to-do list which says, “make pictures better on the blog.” I don’t really know what that means in the long run, and that’s the point. I want my content to be more dynamic. WordPress is great for that, but it still feels cumbersome for me. I have to think about a lot of other items like plugins, widgets, and having to dig to get something like custom CSS applied to a post. I’ve looked into switching over to another open-source CMS called Anchor, but I haven’t gotten around to migrating yet. It’ll happen eventually.
Either way, one thing I wanted to experiment with the other day was giving an image a mouse hover overlay which would link to something else. I have a working sample on a post from the other day, but the gist is shown below.
I tried to do this with inline CSS, but as it turns out, using the :hover pseudo property inline is a big no-no.
The reason you can’t do it inline is you have to add some extra div elements to the blog content, and then style each based on it’s id. Not too hard, but the code editing in WordPress really stinks, so it took me a while.
I had an idea of how to do this, but couldn’t figure out how to stack my new div elements. I found a demo that gave me the HTML structure and accompanying CSS. All I did from there was apply my own image URL and tweak the size of the box as well as the padding applied. My final code ended up as:
HTML
CSS – put this in style tags at the end of your content in the WordPress HTML editor.
So, it isn’t perfect, but it works. If I ever make the switch over to Anchor, I know this process is much simpler. Until then, I’ll keep posting tips.