Ways to Image Change on Hover

  • Author
  • #1096541


    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 escritouncine.com.


    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.



    You tried and worked? But how? I can’t see anything in the source. May i ask the creator?


    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.


    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#



    Nice, I’ll be waiting for your experience. You’re such a good community member houstonweaver


    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…)

      <a href="/">
       <img src="http:// escritouncine.files.wordpress.com/2012/12/FIRSTIMAGENAME" width="300" height="168" alt="Critical Alt Text" />

    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:



    Ok, i’ll see if it works


    I think there are many approaches to this. See this post …

The topic ‘Ways to Image Change on Hover’ is closed to new replies.