Hi there can you please help, Im trying to put a orange hover on a grid, containing a image (that looks like a icon) and text box.
The grid hovers orange correctly, but If I mouseover on the grid – the image (icon) and the text should both change simultaneously..
So am I correct when I say that it is a grid (with a class .block1) PLUS the image (class named .icon1) PLUS the text box (class named .textbox1)?
The tricky part for me is that the image should change to another image and the text must go white – when you hover on the block (grid).
Then it also must be clickable ..
It sounds confusing, hope you can help me?
Thanks!
Hey vivant75313!
I’m not entirely sure what you are trying to achieve here, you want each section to be a separate link, correct? Also, when hovering, you want the text to change to white? If not, please try to explain in more detail or provide us with screenshots highlighting what you are trying to achieve.
Cheers!
Rikard
Hi!
Unfortunately, you can’t do an image swap using the image element. You need to create the image container manually, using a text block probably, then use css to attach the icon image as background. A good example here:
http://stackoverflow.com/questions/15468037/basic-css-hover-image-swap
http://stradegyadvertising.com/tutorial-how-to-image-hover-swap-css/
If you’re using an actual font icon, we can change the background and color via css but since you’re using an actual icon image, the css swap is your best option.
Cheers!
Ismael