[Resolved] Transition on div rollover

[Tom]

I’m afraid there’s really not much I can do to help without seeing the issue first hand. Since this isn’t really related to GP at all, I can’t take the time to rebuild the scenario on my own site, but I am happy to help if the scenario is set up for me and I just have take a look at the code.

Hope you understand.

Perhaps this article will help you come up with something cleaner: https://davidwalsh.name/css-flip

[Max]

Tom

I have just emailed you the log in details for a test site.

I have set up the relevant code including your snippet in the css section of GP.

You will see that on mobile or tablet view, in the second box (bottom) the (+) icons are not rendering properly when viewed in chrome.

Thanks for your patience and kind assistance.

Regards

Max

[Tom]

Try doing this:

.box-icons li {
    position: relative;
}

[Max]

Well done.

Thank you for your patience and for taking the time to assist with a design related issue.

Kind Regards and have a nice weekend.

Max

[Tom]

You too 🙂

[Max]

Sorry Tom

But I have to reopen this thread.

I added the following css to style the buttons inside my bottom box:

.button {
    background-color: transparent;
    border: 1px solid transparent;
    outline:solid #000 1px;
    transition: all 0.5s ease;
    color:#000 !important;
    text-transform:uppercase;
    font-weight:600;
}

.button:active, .button:hover {
    background-color: #226026;
    border:1px solid #fff;
    outline:solid #226026 1px;
    color: #fff !important;
    text-transform:uppercase;
    font-weight:600;
}

What results is a weird ghosting effect of the button on the next section down underneath the boxes.

If you visit my beta site I have added the button code there so that you can see the bug.

I have identified that the problem is arsing from the following line in the button CSS:

transition: all 0.5s ease;

It is probably because there is a transition on the divs and then on the button inside a div.

After lots of online searching I was unable to find a fix for this. I tinkered with z-index values but had no success.

If you could help me out that would be appreciated greatly.

Kind Regards

Max

[Tom]

Can you send me your site link again? Your other email was closed and buried under tons of other ones.

Thanks.

[Max]

Email resent.

[Tom]

I would seriously consider trying to build your boxes like this: https://davidwalsh.name/css-flip

You’ll run into way less issues. The current way you’re doing it is going to have quirks like this no matter what you do.

[Max]

I have invested weeks into the current design. So I would like to run with it if possible. Everything runs fine except for the conflict between the transitions. Surely there must be a fix for that.

[Max]

Also the flip effect is very animated and not in the same style as the flat design I have created for the rest of the site.

[Max]

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

[Max]

compass?

[Tom]

The transition can be changed, it’s just the overall HTML and CSS which is more semantic.

You can try this:

.box-button-wrapper .button {
    transition: all 0s;
}

[Max]

Hey Tom

Thanks for getting back to me.

The code solves the problem by stripping out the transition from the button.

Same as if I did not include any transition in the css for the button.

As proof of concept I have set up another box at the top of page on my beta site. (navigate to it from the menu as I now have a contact form set as the front page).

The box has transition on the divs and also the button. (although the position of my divs still needs some work) and no ghosting effect.

What do you think?

Kind regards

Max

[Author]

Posts