hover quote container....? - Post ID...

User 283347 Photo


Registered User
388 posts

Hello All...I have been trying to replicate in SD3 the hover effects shown here... http://themes.coffeecup.com/responsive-site-designer/release/events.html which is a coffeecup theme.
Scroll down right below "Join a Group" heading...hover over "saving souls" it talks about putting text in the hover quote container...how do I do this?

I know how to change the color upon hover but I cannot for the life of me figure out how to make the text show.
Any ideas are welcomed. I'm still early in the curve with SD3 so assume I know nothing. :/

Thanks,
MJ
User 2699991 Photo


Registered User
5,391 posts
Online Now

mark johnson wrote:
Hello All...I have been trying to replicate in SD3 the hover effects shown here... http://themes.coffeecup.com/responsive-site-designer/release/events.html which is a coffeecup theme.
Scroll down right below "Join a Group" heading...hover over "saving souls" it talks about putting text in the hover quote container...how do I do this?

I know how to change the color upon hover but I cannot for the life of me figure out how to make the text show.
Any ideas are welcomed. I'm still early in the curve with SD3 so assume I know nothing. :/

Thanks,
MJ

Either the container holding the top (outer) container or the container (inner) holding the hover information will be set to "position" absolute" (without seeing the theme) I can't say which one for sure) but whichever one it is set the position to "static" edit the text insert image whatever you want to do,,, THEM PUT THE CONTAINER BACK TO "position absolute: when finished

I think that is how it should be done, but as I say without knowing the theme or seeing the project file I am only making my best guess.
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


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 283347 Photo


Registered User
388 posts

Wayan,

Excellent advice! Thanks!! It was already on "static" so I put it on "absolute"...then gave it a z index of 500 so it came to the top...then I could see and edit the text. Then I put z index back to 0 and back to "static".
Note** I first had to use the element tree to find the correct text / paragraph / etc. ...then double click and use the capital
A when hovering to get to text edit mode.

Seem like a long way around the world but it works :)
Thanks, again!
MJ
User 244626 Photo


Registered User
811 posts

Probably should add a window resize function for the menu to remove the inline display:none thats added when the fade in fade out animation UI happens at mobile size (on desktop) and then user resizes the browser again to expanded desktop view. The nav then disappears.....

Its done with Grid Builder....probably edited afterwards for the effect of the hover ?
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Twinstream wrote:
Probably should add a window resize function for the menu to remove the inline display:none thats added when the fade in fade out animation UI happens at mobile size (on desktop) and then user resizes the browser again to expanded desktop view. The nav then disappears.....

Its done with Grid Builder....probably edited afterwards for the effect of the hover ?


The Release Theme fade out fade in animation takes control of the display of the nav by inline css display control.

My conclusion is that to prevent the menu from disappearing on window resize after a toggling of the menu on a desktop mobile view and then expanding back to desktop (On the Release Template) is that the vertical and medium-horizontal classes must be used on the ul of the nav to indicate how the inline is updated for the window resize. Otherwise the inlined display: none does not get changed.


<div class="container navlink-toggler" id="main-nav" data-toggler="" data-animate="fade-in fade-out" href="about.html">
<ul class="list-container vertical medium-horizontal nav-container">
Bootstrap 5 CSS Grid.

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.