CSS Hover Images

thatwasmykil · Member · Jun 25, 2012 at 7:11 am
Copy link

Add topic to favorites
Hey there, I would like to replicate what is seen here: http://mapletimes.tk/about/equipment/

with the Hover Images, is this possible with the CSS upgrade from wordpress.com?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 25, 2012 at 5:13 pm
Copy link
No, that requires some HTML that is not allowed here at wordpress.com, and that site is sort of broken anyway. Not sure what is wrong with their code, but it only works once for me and then breaks and doesn’t do anything after that.
designsimply · Member · Jun 25, 2012 at 8:16 pm
Copy link
There is a way to make an image rollover using pure CSS. It’s not exactly the same, but it might interest you. Note that it works for anchor tags, so the images should be links and each one should have a unique identifier. Also, each image you set it up for would have it’s own CSS block. Here is a basic example if you’re interested:

Add this HTML to a test post:
```
<p><a class="placeholder-1397"><img src="http://thatwasmykil.files.wordpress.com/2012/06/maplestory-2012-06-22-20-30-04-02.png?w=630" alt="The 1337 Bishop" class="size-full wp-image-1397"></a>
</p>
```
Then add this to your Appearance → Custom Design → CSS editor:
```
.placeholder-1397 {
	display: block;
	width: 630px;
	height: 472px;
	background: url(http://thatwasmykil.files.wordpress.com/2012/06/maplestory-2012-06-22-20-30-04-02.png?w=630) no-repeat;
}
.placeholder-1397:hover {
	background: url(http://thatwasmykil.files.wordpress.com/2012/05/maplestory-2012-04-30-23-51-42-00.png?w=630&h=472) no-repeat;
}
.placeholder-1397 img {
	display: none;
}
```
Open the post and hover your mouse over the image. You can switch out the image URLs and change the “placeholder-1397” name to whatever you’d like.

No items found.