Can Foundation Framer do this... - Post ID 271136


Registered User
91 posts


Senior Advisor
17,825 posts
Online Now

There's nothing tied to the action button. I was able to get the active Pseudo set after the hover by setting it second in RSD.
The button is shown and hid by CSS in the head of the page but the paragraph hiding and showing is straight through RSD.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Registered User
430 posts

I am trying to wrap my mind around the concept like this:
<div class="view effect">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>
where the CSS is this:
.effect img {
opacity:1;
transform:scale(1,1);
transition: all 0.2s ease-in;
}

.effect .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:150px;
width:0;
height:0;
transform:translateY(-125px);
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}

.effect a.info {
opacity:0;
transform:translateY(-125px);
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}

.effect:hover img {
opacity:0.7;
transform:scale(2,2);
}

.effect:hover .mask {
opacity: 1;
transform: translateY(0px);
}

.effect:hover a.info {
opacity:1;
transform:translateY(100px);
}
It appears that this is custom css and there would be no way to assign effect:hover to "i guess the children" that are nested other than to write custom css code and link to it ?
Break on through to the other side


Registered User
430 posts

Webby wrote:
Check out Animate css

https://daneden.github.io/animate.css/


Ahhh Yeah....I see what you mean now ! Forget hover......mouse in and mouse out.
Break on through to the other side


Senior Advisor
17,825 posts
Online Now

I found an example fiddle.
http://jsfiddle.net/3p6Kz/2/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
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 personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com


Registered User
430 posts

Thanks for the fiddle example Eric. This example has applied hover to one element to transition in. What I am trying to do is have more than one element transition on hover. I have uploaded a small example (sorry it was done in Bootstrap) showing a transition of a heading down from the top. But I would also like the picture to skew at the same time which requires some sort of hover input. You can see the hover heading transition is blocking out the hover picture transition. The picture will hover skew if you touch the corners.
So I am just saying that anything nested in the main container needs to be linked to the hover command of just the main container and I do not see a way to do that directly in the designer program.
Attachments:
Break on through to the other side

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.