Can Foundation Framer do this... -...

User 2022095 Photo


Registered User
121 posts

Anyone know if foundation framer do this: https://miketricking.github.io/dist/
If so can someone explain how this or something similar can be achieved.
Thanks,
-wmfx
User 122279 Photo


Senior Advisor
14,447 posts

My guess is that RFF can do it. I haven't checked all the effects, but the ones I did check didn't look too difficult. Since I haven't actually tried creating one of them, I won't be able to explain, but of course one easy option would be to use a html element for the html and then create a separate css file with the given css and then add it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

I have been looking at this recently too because it is a very common effect. The link you gave for example works well on my desktop but does not on mobile.

You can use two containers, one set to relative and the other to absolute so it sits over the first. Then add your objects and text to individual containers and use the hover state to change the opacity effect. Add your transitions in too. I am not sure about the fix for mobile though.... no hover.

You would have to use RSD 2.0 to utilize things like blur effects and the others available.

Or you could search for a plugin Philter and add it.
Bootstrap 5 CSS Grid.
User 2022095 Photo


Registered User
121 posts

Inger, Twinstream thank you both.
hum... no hover on mobile devices. ooh well!

-wmfx
User 187934 Photo


Senior Advisor
20,181 posts

Actually you can get hover to work on touch devices.
If you apply the active Pseudo after the hover it will work on touch devices.

I tested it in RSD and it seemed worked fine on my touch screen laptop and iphone.
http://ericrohloff.com/coffeecup/ccforu … howbutton/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2147646 Photo


Registered User
233 posts

Hi Eric, it seems to work but there is no way to click the action button. So it would be a good way to display extra content, but not if it contains links :)

User 244626 Photo


Registered User
811 posts

Since on mobile devices the pictures take up the full screen a scrolltrigger may be more effective at the lower breakpoints rather than hover which could still be used at the higher breakpoints.

Eric, were you able to add the active Pseudo after the hover some way in RSD, inline css in the head, or custom css file ? or was it a hard main.css edit ?
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Oh, I see it now in the inspector....inline css in the head. Thanks !
Bootstrap 5 CSS Grid.
User 2147646 Photo


Registered User
233 posts

jamo wrote:
Hi Eric, it seems to work but there is no way to click the action button. So it would be a good way to display extra content, but not if it contains links :)
Thinking about it again maybe the button is to reveal the text? But for me the text is loaded to begin and then the button is revealed on touch :/

User 244626 Photo


Registered User
811 posts

Returning to the first question of hover effects. I can make a simple hover effect which consists of a picture and a heading that slides down into view over the picture on hover.

Where it starts becoming more complicated is where you add in individual elements that require hover input control to transition over the picture.

On the net they describe overlays or box that gets the hover command and then that is controlling transitions of the other elements sliding in, fading in, color, opacity, etc.

Is there anyway to target these elements from the hover command on the main box from within RSD, FF, BS ? or does one have to use custom css or js to accomplish this ?
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.