Hover State Question

User 2284319 Photo


Registered User
20 posts

I am using the hover state to change the color of an image. Is it possible to change the associated text color & weight too when the mouse hovers over the image?
User 2699991 Photo


Registered User
4,782 posts
Online Now

Robert Rung wrote:
I am using the hover state to change the color of an image. Is it possible to change the associated text color & weight too when the mouse hovers over the image?


Hi Robert
Is the image in a parent container with the text in another container but still in the parent container

To do what you are thinking about really the image would be best as a background image, with the text as an overlay, that way you could change the appearance of the contents of the parent container on hover.

I don't think that by hovering over just the image that you could alter the text, without possibly some JS magic
I have never tried that so I maybe wrong, I will do a little bit of experimenting now
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

The only way I can think of is to make a hover card,


very short video example, it might not be exactly what you are looking for, but that's the only way so far that I can get close

https://youtu.be/5OgKD-i0qew
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Wayan Jaya Space Cadet wrote:
The only way I can think of is to make a hover card,


very short video example, it might not be exactly what you are looking for, but that's the only way so far that I can get close


The way that works is to have 2 containers within a parent container
each container has the same image & the same text ,

the first container is the "Top" and the second is the "Bottom" (underneath)

on the bottom container, you change the image colour and the text colour (or even change the image /text if you desire)

You then set both containers to "Absolute'
You then set the "top" container to a hover state which is opacity=0
This is the link now to a more refined example

https://youtu.be/Zq-wKInO4jM
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2885740 Photo


Registered User
60 posts

Hi Robert,
When you follow the link in my profile you find under "Selectors and Hover" a basic solution for the hover-problem, written in CSS only.
User 2699991 Photo


Registered User
4,782 posts
Online Now

René wrote:
Hi Robert,
When you follow the link in my profile you find under "Selectors and Hover" a basic solution for the hover-problem, written in CSS only.


That looks pretty neat,
works a treat
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2284319 Photo


Registered User
20 posts

Thanks all. Appreciate the feedback.
User 2906089 Photo


Registered User
222 posts

That is some really great work Rene, Thank you for sharing your work!
Learn something, Share something.
User 2885740 Photo


Registered User
60 posts

you're welcome :)

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.