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

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.

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.

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

-wmfx

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/

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

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 ?

Oh, I see it now in the inspector....inline css in the head. Thanks !

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

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 ?