Hi - I'm trying to get an image to change on hover and it's not working for me.
I found the following code which I've adapted, but left intact, if you see what I mean:

.shop{
background-image:url("images/shop.jpg");
width:380px; /*image width*/
height:290px; /*image height*/
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.shop:hover{
background-image:url("images/shop-red.jpg");
}

And the html I'm using is <div class="shop"></div>

I found it on this site: www.toolinfy.com/css3-change-image-on-hover

Anyone any idea why it's not working?
Thanks
Ian

What is the link for site?

Cheers
Paul

Hi Paul - it's www.leadbetters.co.uk/newsite/

The spacing above the content appears to have grown too deep. I've probably done something silly in custom.css

Thanks

Ian

The path to the image is wrong and the height is too tall hence the extra space

You have no image added via html so its only a background image - is that right?

Cheers

Also the image if the image was there it would be repeating

Hi Paul - yes, a background image.
Why is the path to the image wrong?
I've taken out the size settings which has fixed the white space - thanks.
Ian

The image isn't available where the path points to

this is the path you have with the relative css you created

www.leadbetters.co.uk/newsite/templates/responsive/css/newsite/images/shop.jpg

If you add the image to the images folder and call it shop it should load the image

Hi Paul - yes, it's working now
Still not quite right though…
The other images across the top appear to be resizing automatically to fit the modules.
If I take out the size settings on this fourth one, only a small part of the image appears.
If I put the actual dimensions in of course it's too big.
Why is it not working like the others?
Ian

Its a background image so different rules apply

for it to resize it would need to added to the html like the other images

Cheers

So can I put the css in-line - or am I attempting the impossible?
Thanks
Ian

I'm not exactly sure how this would work responsively given the tutorial is only one image and you I'm guessing will what 4

At the very least you will need to adapt the tutorial css and create media queries

Cheers

You may get a similar effect if you tweaked the zentools css

Hmmm. Why do clients always want difficult things?
I'm not sure about Zentools. Which option would I go for?
I might have to think of another way round this…
I'll go and cut the grass while it's not raining…
Thanks for all your time on this one Paul.
Ian

I was thinking along the lines of something like the example used here on hover

demo.joomlabamboo.com/index.php?theme=apr14

That's all terribly clever. Is the hover done with opacity?
Thanks
Ian

I was just thinking you use this rather a hover image or look for a font icon that might be more relevant to their business and use that

Cheers
Paul

But in answer to your question yes it uses opacity in the inline css combined with js

Good ideas The example is very attractive.
I was also thinking creating a class for a block of html colour and text under each picture which would change on hover, rather than changing the whole pic each time.
He also wants the colour block to change on active.
Got to cut the grass now, I'll think while I'm mowing.
thanks again for the help,
Ian

No problem