Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Ways to Image Change on Hover

  1. scrito1cine
    Member

    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.

  2. houstonweaver
    Member

    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.

  3. scrito1cine
    Member

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

  4. houstonweaver
    Member

    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.

  5. houstonweaver
    Member

    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#

  6. scrito1cine
    Member

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

  7. houstonweaver
    Member

    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:

  8. javertcalvo
    Member

    Ok, i'll see if it works

  9. houstonweaver
    Member

    I think there are many approaches to this. See this post ...
    http://en.forums.wordpress.com/topic/change-image-on-mouse-rollover?replies=6

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags