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

User 303390 Photo


Registered User
97 posts

User 187934 Photo


Senior Advisor
20,181 posts

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.

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 244626 Photo


Registered User
811 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 ?
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 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.
Bootstrap 5 CSS Grid.
User 187934 Photo


Senior Advisor
20,181 posts

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.

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 244626 Photo


Registered User
811 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:
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.