Change image once we hover on image is not working

Question

once we hover on image, i want to display another image.

<div>
  <a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
           'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" 
     title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>
</div>

i tried as below :

I added class="a1", but it did't worked for me.

<a class="a1"  href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>',
                     'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" 
   title="<?php echo $this->__('Share on Google Plus') ?>"><img src ="<?php echo $this->getSkinUrl('images/G+.png') ?>"/></a>

css

.a1:hover {
   background-image: url('images/G+1.png');
}

Duplicate, you can find the answer here: http://stackoverflow.com/questions/4717117/css-image-link-change-on-hover :) — Aaron Lavers, Jun 15 '16 at 07:08
Set classes or IDs to your DIV and use `:hover` to change the images... — masmrdrr, Jun 15 '16 at 07:30
@AaronLavers please check updated questionand remove "duplicate" — fresher, Jun 15 '16 at 07:33
You can use your css only if the first image is also in `background-image` but not an `img` tag as you do - as you can see in the attached question by @AaronLavers — Mosh Feu, Jun 15 '16 at 07:35
You cant do this with just css, since the first image is an img not a css image background. try javascript — Nique Joe, Jun 15 '16 at 07:36
@nsdlfefinedieicbe this is a duplicate however I have expanded the link into an answer for you. — Aaron Lavers, Jun 15 '16 at 07:53

Sayed Rafeeq · Accepted Answer · 2018-03-19T06:47:24.763

Here are two solutions for your query. (Change image on mouse hover)

HTML + JavaScript Demo

<div class="image_hover">
  <a href="#" rel="nofollow">
    <img src="http://i.imgur.com/h1hLX4Vb.jpg" height="160" onmouseout="this.src='http://i.imgur.com/h1hLX4Vb.jpg'" onmouseover="this.src='http://i.imgur.com/dmnwaafb.jpg'" width="160">
  </a>
</div>

HTML + CSS Demo

.image_hover {
    position: relative;
    cursor: pointer;
}
.image_hover img {
    position: absolute;
    transition: opacity .5s ease;
}
.image_hover img:hover {
    opacity: 0;
}

<div class="image_hover">
    <img src="http://i.imgur.com/h1hLX4Vb.jpg" width="160" height="160"/>
    <img src="http://i.imgur.com/dmnwaafb.jpg" width="160" height="160"/>
</div>

score 3 · Answer 2 · edited May 23 '17 at 12:08

First, give your link tag some style, to set it's background.

a.a1 {
  display: block;
  width: 100px;
  height: 50px; (width and height are whatever you need them to be)
  background: url('images/G+.png') no-repeat center center;
}

Now this is a very light example here, but what it is doing is setting your link as a block-level element, giving the right dimensions of the image background, and then setting the whole elements background as the image.

Then, for the rollover effect, you use:

a.a1:hover {
  background: url('images/G+1.png') no-repeat center center;
}

Now I like to put my no-repeat and positioning attributes in the background attribute, you can separate these into background-size etc if you really want.

I am aware in your implementation you have an img in there setting the picture, but for what you want to achieve I'd suggest using a css alternative.

SO link on the subject (as per comment): CSS: image link, change on hover

i tried as you said as here : ` ` now image is not visible. may be i am doing something wrong, please check code. — fresher, Jun 15 '16 at 09:27

Mosh Feu · Answer 3 · 2016-06-15T08:02:34.587

2

Additional the answer in @AaronLavers's comment (use background-image and replace it on :hover), you can use :before - pseudo class and content property.

The plus

It's generic solution. You have not to set the width and the height of the link - like in background-image way.

The minus

You can't change the image's size like using background-size etc. but if your image is the exact size you want, the problem solved.

a:before {
  content:url(https://i.stack.imgur.com/upUcm.jpg); 
}

a:hover:before {
  content:url(https://i.stack.imgur.com/sn2Ag.jpg);
}

<a href="#"></a>

edited Jun 15 '16 at 08:02

answered Jun 15 '16 at 07:46

Mosh Feu

28,354
16
88
135

Really good suggestion using pseudo elements to contain the image – Aaron Lavers Jun 15 '16 at 07:52
i tried your css code, but than image is not visible. i may be doing something wrong. can you please update the answer with complete code. – fresher Jun 15 '16 at 09:30
Which browser are using? If you create working snippet I will fix it for you. – Mosh Feu Jun 15 '16 at 09:58
thnaks for support – fresher Jun 15 '16 at 13:10

score 1 · Answer 4 · answered Jun 15 '16 at 07:42

1

The reason this is not working is because the img tag and background-image are 2 different things. If you want this to work, you could try putting the background image on the a to begin with and then changing it on hover. It needs important because of specificity rules. The other option would involve putting php in your css file, but that is probably not worth the effort to set up.

CSS
.a1:hover {
background-image: url('images/G+1.png') !important;
}

HTML
<a class="a1" style="background-image: url('<?php echo $this->getSkinUrl('images/G+.png') ?>');"></a>

answered Jun 15 '16 at 07:42

Andrew

1,963
3
25
35

Thanks, i tried like this , but didt worked for me : `

` – fresher Jun 15 '16 at 07:54
thnaks for support – fresher Jun 15 '16 at 13:10

Change image once we hover on image is not working

4 Answers4