Ways to Image Change on Hover

scrito1cine · Member · Dec 13, 2012 at 9:12 pm
Copy link

Add topic to favorites
I’ve searched for hours inside the forum and for the internet as well. Seems the only way to change images on Hover is to use javascript, wich is banned on WordPress. I think that should be a way to do this, maybe some wordpress programmers should do something.

Anyway, anybody tried to do this and succed? Post your experience here

The blog I need help with is: (visible only to logged in users)
houstonweaver · Member · Dec 14, 2012 at 12:40 am
Copy link
I found a source for a method that works over at http://green-beast.com/. Look at it and see what you can do with it.

I tried it on a wordpress.com test site and the hover worked.
scrito1cine · Member · Dec 14, 2012 at 9:36 am
Copy link
You tried and worked? But how? I can’t see anything in the source. May i ask the creator?
houstonweaver · Member · Dec 14, 2012 at 12:14 pm
Copy link
I think there are many ways to accomplish this. I made a note of what worked for me but its on my computer and I’m on my ipad right now. Have to switch computers in a little bit and will be away from any for a few hours this morning.

When I tested it, I just had one tricky part. Meanwhile make 2 images exactly the size you need.
houstonweaver · Member · Dec 14, 2012 at 12:16 pm
Copy link
And sorry that link was his attribution link. This is where he demos it and posts html and CSS code. http://green-beast.com/experiments/css_image_replacement.php#
scrito1cine · Member · Dec 14, 2012 at 12:17 pm
Copy link
Nice, I’ll be waiting for your experience. You’re such a good community member houstonweaver
houstonweaver · Member · Dec 14, 2012 at 12:36 pm
Copy link
ok this is what worked for me, substituting your blog address and image name…

When working on your page where you have the image rollover action, you must switch to your text tab. This is the html he provided and it worked for me. (in spite of using h1 which I thought was reserved for themes…)
```
<h1>
  <a href="/">
   <img src="http:// escritouncine.files.wordpress.com/2012/12/FIRSTIMAGENAME" width="300" height="168" alt="Critical Alt Text" />
  </a>
 </h1>
```
Then this in your css:
```
h1 a {
	display: block;
	width: 300px;
	height: 168px;
}

h1 a:hover, h1 a:focus, h1 a:active {
	background: transparent url('http:// escritouncine.files.wordpress.com/2012/12/SECONDIMAGENAME') no-repeat;
}

h1 a:hover img, h1 a:focus img, h1 a:active img {
	background: transparent;
	visibility: hidden;
}
```
Attribute to: Mike Cherim

One caveat: I don;t consider this pure because ideally I would want to just designate the images by class or some way like that, but in his example he puts his actual image name in his css. So it would be most useful somewhere more permanent rather than a technique to be used randomly in a post:
javertcalvo · Member · Dec 15, 2012 at 2:33 pm
Copy link
Ok, i’ll see if it works
houstonweaver · Member · Dec 15, 2012 at 2:42 pm
Copy link
I think there are many approaches to this. See this post …
https://en.forums.wordpress.com/topic/change-image-on-mouse-rollover?replies=6

No items found.