Hi from about to go dark and its only 3.30PM York UK 
On this page:
I’m looking to make images swap for a different image when they are hovered over, below screenshot for further illustration:
I took a look at this tutorial: http://stradegyadvertising.com/tutorial-how-to-image-hover-swap-css/ would this be ok to follow?
Thanks in advance,
David
That is one way to do it. Another way is to have one image as the background and the other image as an img in the container with the background. Then use hover to change the img opacity and reveal the bg.
There are many ways to do, It would all depend on your level of comfort with html/css/jquery. This link might help.
I did a search for image swap. several example came up. You might enjoy looking through them.
Thanks for replies, really like @pdxSherpa solution but the Jquery stuff may push my brain to boiling point so I’m going to take a closer look at @SamA74 idea, will update here with how I progress 
You can use CSS too:
set the background image of the element to the original image, then set the new image (in CSS) for when it’s hovered over.
@SamA74 @pdxSherpa @mainstwebguy1
Hi guys and thank you for your ideas. OK Ive ran into a problem 
On this page:http://test.davidclick.com/test/package.html and illustrated below:
I just cant get image to change on mouse hover. I followed this tutorial:http://www.corelangs.com/css/box/hover.html “CSS hover image swap - onmouseover Event” but I just cant get it to work
Heres the css Ive bodged up in some way:.top-image-text{
background-image:url(…/test/images/wedding-photography-service-200.jpg)
width:200px;
height:200px;
}
.top-image-text:hover {
width:200px;
height:200px;
background: url(…/test/images/wedding-coverage-rollover.jpg)
}
Any insights welcome
Hi,
The element ‘.top-image-text’ is actually your html image and not a containing element as such which means that when you hover your image you are changing the background of the image. Of course you will see no effect because the html image is in front of its own background so you will see nothing.
Although I guess this was not you were intending (as it is not mentioned in that tutorial) but you can change the background of the image on hover if you set its height and width to zero but create space for the background with padding.
e.g.
.top-image-text:hover {
background: url(../test/images/wedding-coverage-rollover.jpg);
width: 0;
height: 0;
padding: 200px 0 0 200px;
}
Of course you will need to set up classes for the various different background images.
@PaulOB Thank you so much that worked! Appreciate the theory explanation too :
Hi @PaulOB
I am very pleased to say I worked out how to add different back ground images to the other images in page:
I amy be worrying for no reason but is my css fix to get different rollover images a bit bloated, I have a bad feeling there should be a more efficient way of achieving the same result.
Heres the relevant css so far:
img.top-image-text{
float:left;
clear:left;
margin:0 10px 20px 0;
}
.top-image-text{
background-image:url(…/test/images/wedding-photography-service-200.jpg)
width:200px;
height:200px;
}
.top-image-text:hover {
background: url(…/test/images/wedding-coverage-rollover.jpg);
width: 0;
height: 0;
padding: 200px 0 0 200px;
}
/* My attempt */
img.top-image-dvd{
float:left;
clear:left;
margin:0 10px 20px 0;
}
.top-image-dvd{
background-image:url(…/test/images/wedding-dvd-200.jpg)
width:200px;
height:200px;
}
.top-image-dvd:hover {
background: url(…/test/images/dvd-rollover.png);
width: 0;
height: 0;
padding: 200px 0 0 200px;
}
/* My attempt ends */
Thanks,
David
The only thing that is different on those images (I assume) is the rollover image?
If so then all you need to do is add a new class to each image and change the image url on hover using that new class.
e.g.
<img class="top-image-text image2" src="images/wedding-photography-service-200.jpg" alt="">
...
<img class="top-image-text image3" src="images/wedding-photography-service-200.jpg" alt="">
etc...
Then in CS:
.image2:hover {background-image:url(../test/images/img2.jpg)}
.image3:hover {background-image:url(../test/images/img3.jpg)}
.image4:hover {background-image:url(../test/images/img4.jpg)}
.image5:hover {background-image:url(../test/images/img5.jpg)}
etc…
You may wish to add some css transition to smooth out the animation rollover.
d
The problem I’m seeing in that method (I think that’s what it is) is you are not loading the background image until the hover begins. That is causing a delay, I’m seeing a blank white bg while the image loads on hover.
I think its best to have the background image there all along, obscured by the foreground image until the hover, then hide the foreground by whichever means you like, opacity, transform, cropping etc…
Yes that would be best as long as the foreground image doesn’t have transparent parts (Otherwise you will see the background image).
However you could still do this but just offset the background-position so that the background is offscreen (background-position:-999em -999em) initially and then just move it back on hover.
e.g.
.image2 {background:url(../test/images/img2.jpg) no-repeat -99em -999em}
.image3 {background:url(../test/images/img3.jpg) no-repeat -99em -999em}
.image4 {background:url(../test/images/img4.jpg) no-repeat -99em -999em}
.image5 {background:url(../test/images/img5.jpg) no-repeat -99em -999em}
Then on hover:
.top-image-text:hover {
background-position: 0 0;
width: 0;
height: 0;
padding: 200px 0 0 200px;
}
I used a similar method a while ago to use sprites as foreground and background images with transition.
Thanks for the revision, will apply sometime this week and update here
Big thank you to everyone for helping me achieve an image swap technique on this page:
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.