Hover State Question
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?
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?
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/
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/
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
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/
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/
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 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/
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/
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.
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.
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.
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/
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/
Thanks all. Appreciate the feedback.
That is some really great work Rene, Thank you for sharing your work!
Learn something, Share something.
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.