If you’ve ever had a list item or a paragraph and you needed an image to appear after the text, but only when someone hovers over it, here’s the way to do it. I don’t run into this very often myself, but every now and then it comes up.
Here’s some simple html:
<div class=”widget”>
<p>A line of fantastically written text</p>
</div>
Which will look like this:
A line of fantastically written text
And then here is the CSS:
.widget-image p:hover {
background-image: url(‘http://yourfolder/your-image’);
background-position: 40% 1%;
background-repeat: no-repeat;
}
Which will make it do this when you hover over it:
You’ll first need to call the class or id of the div your content is wrapped in and then call out the specific element you want the image to appear after. Then of course the pseudo-element :hover so it only appears on the hover. I’ve seen many posts on using the pseudo-element :after, and as much as we’d all like that to work in every browser, it just doesn’t. And this trick won’t work in IE6, but then what does, right?
The background-position needs to be altered based on where the bottom and right of the end of your <div> container is. This will also work after a <li> tag or any other html tag to my knowledge. If someone finds where it doesn’t work, leave a comment so we all know.
Leave a Reply