Responsive Site Designer Image Hover...
Denny Spencer
Registered User
7 posts
I'm using Responsive Site Designer and I see that it has hover effect capabilities. How can I apply hover effect on an image or change an image when hovered over via the Responsive Site Designer tool?
Steve
Senior Advisor
3,087 posts
Hi Denny,
Simply select the hover option from the dropdown on the design toolbar and apply your changes.
Simply select the hover option from the dropdown on the design toolbar and apply your changes.
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Denny Spencer
Registered User
7 posts
I believe I've done that and it doesn't change. I would expect to select an image (i.e. image1.jpg) and go to the Design toolbar and select | style | state and change it from [Regular] to [Hover] and then click "change" to change the image when one hovers over the image. However, this doesn't work. I notice this only works for text but not images. Any other suggestions?
Steve
Senior Advisor
3,087 posts
I did notice that it did not change in the preview window but it did change once i uploaded my website. Try uploading your website to your server and let us know if its still an issue.
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Bob Visser
COO
827 posts
Denny Spencer wrote:
I believe I've done that and it doesn't change. I would expect to select an image (i.e. image1.jpg) and go to the Design toolbar and select | style | state and change it from [Regular] to [Hover] and then click "change" to change the image when one hovers over the image. However, this doesn't work. I notice this only works for text but not images. Any other suggestions?
I believe I've done that and it doesn't change. I would expect to select an image (i.e. image1.jpg) and go to the Design toolbar and select | style | state and change it from [Regular] to [Hover] and then click "change" to change the image when one hovers over the image. However, this doesn't work. I notice this only works for text but not images. Any other suggestions?
Hover is a CSS selector that allows you to change the CSS rules (styles). Changing content, whether text or images is not an option. You can for example add a border or shadow to the image, or even set is to display:none, but not swap it out.
Background images on the other hand are defined in the styles, these you can change on hover.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Denny Spencer
Registered User
7 posts
Unfortunately, that didn't work either. I uploaded to my web server to see if would change the icon when I hovered over it but the image didn't change and it only displayed the last image I selected when selecting "hover". Is this a bug or expected behavior?
Denny Spencer
Registered User
7 posts
Ok, thanks!
lyndaeldo
Guest
1 post
Bob Visser
COO
827 posts
Denny Spencer wrote:
However, this doesn't work. I notice this only works for text but not images. Any other suggestions?
However, this doesn't work. I notice this only works for text but not images. Any other suggestions?
In CSS 'hover' allows you to change the styles, not the content. In this case it seems your image is content:P
This will work if you for example use a background image, which is a style that can be changed on hover. What you also can do is change the position and hide/show (content) images upon hover. Oliver made a few pages with some examples, you can find his post here: http://www.coffeecup.com/forums/users/2 … post251586
Hope this helps!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
