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.
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
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
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 ?
<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.
Ahhh Yeah....I see what you mean now ! Forget hover......mouse in and mouse out.
Bootstrap 5 CSS Grid.
I found an example fiddle.
http://jsfiddle.net/3p6Kz/2/
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
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
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.
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.
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.