[Resolved] Transition on div rollover

[Tom]

The effect is happening because of the overall structure of the boxes, which is why I suggested the better method above. I can’t spend too much time investigating custom stuff like this unfortunately – I’m sure you understand 🙂

[Max]

Tom

I have just resent you an email with the details of how to access my test site.

Earlier in this thread you provided me with the following code to add a transition to my div rollover.

.bottom-box, .top-box:hover>div {
        opacity: 0;
        height: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
}

.top-box:hover>.bottom-box {
	opacity: 1;
        height: auto;
        visibility: visible;
        transition: opacity 0.5s ease;
}

I have just discovered a bug.

Everything works as it should in full screen. But when viewed in tablet or mobile phone there is a big extra padding gap added to the bottom of the top box. On the test site I added a button underneath the boxes so you could see this problem. If you minimize your screen down to tablet or phone and scroll over the boxes you will see the effect underneath.

I have spent a couple of hours trying to find how to fix this but with no success.

For what it is worth my original rollover code (without transition) does not produce this bug.

Any help you can provide is greatly appreciated.

Kind Regards

Max

[Tom]

I’m not noticing any gaps: https://www.screencast.com/t/ut6txamgy

[Max]

I have just spent three hours setting up my content in the flip boxes as the the link you supplied.

Finally got it all working (not easy incorporating grid) only to find it does not work on android.

So of no use to me and the animation not suited to the conservative tone of the site I am developing.

I have found that if add position absolute to your rollover code (as per code below) then it removes the extra padding at the bottom of the boxes, but then the width of the bottom box is collapse and I have not been able to fix that.

.bottom-box, .top-box:hover>div {
    opacity: 0;
    height: 0;
    visibility: hidden;
    transition: opacity .8s ease;
    position:absolute;
}

.top-box:hover>.bottom-box {
	opacity: 1;
    height: auto;
    visibility: visible;
    transition: opacity .8s ease;
}

Kind Regards

Max

[Max]

Gap appears under the last box when not hovered. If you check the beta site you will see I have a button sitting below the boxes as a reference point. If you are in full screen and hover over the boxes then no problem. But if you are in tablet or phone screen, then there is a gap that appears under the bottom box that pushes down the content below. This bug appears in FF Chrome and Android.

As I just posted using position:absolute removes this issue, but then the content/size of the bottom box is collapsed.

[Max]

Did you see the issue?

[Max]

Tom

Have you had a chance to look at this yet.

Kind Regards

Max

[Tom]

Not yet, but I’ll let you know when I get a moment 🙂

[Tom]

Can you show me a screenshot of what you mean here? I’m not noticing anything out of the ordinary.

[Max]

Tom

1. No problem on full screen padding below boxes same if no hover or hover:

Fullscreen no hover:
https://imgur.com/a/jMsvy

Fullscreen on hover:
https://imgur.com/a/BoAlt

2. Bug in tablet or phone view in FF Chrome and android. On no hover state padding added to bottom of boxes. But not there on hover.

Tablet (or phone) view no hover (bug present: extra padding below boxes)
https://imgur.com/a/CiYaF

Tablet (or phone) view on hover (padding disappears)
https://imgur.com/a/l8IVs

Please let me know if you require any further information.

Kind Regards

Max

[Tom]

I think the problem is likely the fixed height you’ve given the boxes. If you want equal heights, you could play with flexbox instead of floats.

[Max]

I have no idea what you are talking about.

[Max]

I have googled and reviewed flex box.

I don’t see how it is possible to use it in this situation because there is not an outer container and then two flex items inside.

I am not a coder so maybe I am missing something.

Remarkable really. I coded a rollover div layout that worked fine on fullscreen, tablet and phone across all browser and I just wanted to add a bit of transition to the hover.

Nearly two weeks later. Still no solution.

Kind Regards

Max

[Tom]

You’d just need to add a container around it.

You could also just remove the height on mobile:

@media (max-width: 768px) {
    .your-box-selector {
        height: auto !important;
    }
}

I’m doing my best to help you out, but I’m sure you can appreciate that this doesn’t exactly fall within GeneratePress support, so I can’t spend a ton of time on it.

[Author]

Posts