[Resolved] Transition on div rollover

[Max]

Tom

I am developing locally so cannot provide link.

I have designed some complex boxes using GPs onboard grid system.

Everything looks nice and functions exactly as it should in all browsers.

I want to add the following transition when hover over the top box (same as I use on my buttons):

transition: all 0.5s ease;

However all of my attempts to add this transition to my existing code did not work.

The html I am using for the boxes is as follows:

<div class="top-box grid-33 ">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">HEADING ONE</p>
</div>
<div class="bottom-box">
<p class="box-header">HEADING ONE</p>
<ul class="box-icons">
 	<li>STUFF</li>
 	<li>MORE STUFF</li>
 	<li>EVEN MORE STUFF</li>
</ul>
<div class="box-button-wrapper"><a class="button" href="https://mysite.com/mypage/">CALL TO ACTION</a></div>
</div>
</div>

<div class="top-box grid-33 ">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">HEADING TWO</p>
</div>
<div class="bottom-box">
<p class="box-header">HEADING TWO</p>
<ul class="box-icons">
 	<li>STUFF</li>
 	<li>MORE STUFF</li>
 	<li>EVEN MORE STUFF</li>
</ul>
<div class="box-button-wrapper"><a class="button" href="https://mysite.com/mypage/">CALL TO ACTION</a></div>
</div>
</div>

<div class="top-box grid-33 ">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">HEADING THREE</p>
</div>
<div class="bottom-box">
<p class="box-header">HEADING THREE</p>
<ul class="box-icons">
 	<li>STUFF</li>
 	<li>MORE STUFF</li>
 	<li>EVEN MORE STUFF</li>
</ul>
<div class="box-button-wrapper"><a class="button" href="https://mysite.com/mypage/">CALL TO ACTION</a></div>
</div>
</div>

And the CSS is as follows:

.bottom-box, .top-box:hover>div {
	display: none;
}

.top-box:hover>.bottom-box {
	display: block;
}

.boxline {
    display: block;
    border-top: 1px solid #000;
    margin: 1em 3em;
    padding: 0;
}

.round-background {
    background: #996600;
    border-radius: 100%;
    border: 8px solid #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.40);
    color: white;
    font-size: 60px;
    padding: 32px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    height: 140px;
    width:140px;
    margin:60px 0 20px 0;
    box-sizing:border-box;
}

.top-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    color:#000; /* need this to remove blue link color from GP settings */
    height:440px;
    box-sizing:border-box;
    background:#CEA453;
}

.bottom-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    margin:-5px -15px -5px -15px;
    background:#fff;
    height:440px;
    box-sizing:border-box;
}

.box-icons, .box-icons li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.box-icons li {
  margin: 1em;
  margin-left: 3em;
  line-height:1em;
}

.box-icons li:before {
  content: '\f067'; /* fa-plus */
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #CEA453;
}

.top-box-text {
    font-weight:600;
}

.box-header {
    background:#CEA453; 
    text-align:center;
    padding:1em 0 1em 0;
    color:#ffffff;
    font-weight:600;
}

.box-button-wrapper {
    text-align:right;
    margin: 0 25px 10px 0;
}

Thanks in advance for your kind assistance.

Regards

Max

[Tom]

Can you link me to the page?

[Max]

Hey Tom

Thanks for your prompt reply.

Did you read the very first line in my post?

Kind Regards

Max

[Leo]

Can you duplicate this on a test server? This kind of issue is hard without seeing the site.

Thanks!

[Max]

Hey Leo

Thanks for your reply.

I am sorry Leo but I do not have access to test server.

If you cut and paste my html and css into a section on a standard GP theme set at 1100px width it works just fine.

Thanks for your understanding and kind assistance.

Regards

Max

[Tom]

From what I can see it should work fine, which is why I need to see your exact set up. It should be pretty easy to just throw it up on a live server using a plugin like Duplicator or All in One Migration.

[Max]

Hey

I think there is perhaps some misunderstanding here.

I know that the above code works fine.

I just need to know where in my current css I have to insert:

transition: all 0.5s ease;

So that when I hover over the top box div there is a slow transition to the bottom box appearing.

Thanks for your kind assistance.

Regards

Max

[Tom]

Ahh..

Using display:none and display:block prevents any sort of transition.

Try this instead:

.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;
}

[Max]

Hey Tom

Thanks for getting back to me.

Your css implements the transition but on rollover the bottom edge of the bottom box div is cropped 15-20px so that part of the top box div is still visible.

Kind regards

Max

[Tom]

Responding to your other topic here (let’s keep things in one topic).

You can set up your localhost with this program: https://local.getflywheel.com/

It allows you to set up a temp URL that people can use to view the site.

[Max]

Hey Tom

The cropping issue can be fixed by adjusting the padding under the button in the bottom box div.

However, after road testing your css on FF and chrome there are also some other problems (which I assume come from using auto height??)

1. In chrome the font awesome icons are not rendering before the STUFF MORE STUFF li in the bottom box div.
2. Because of the length of some of the text in the STUFF lis it breaks into two lines in mobile view. This causes the bottom box to break over onto the top box div below (in both Chrome and FF).

Kind Regards

Max

[Max]

I just downloaded flywheel.

I scanned the exe with my virus protection (panda) and it was fine.

Then upon running the exe it was flagged as a virus.

I tried to delete the file but it will not let me.

I was excited…but not anymore…

[Max]

Just to check.

I reinserted my original rollover css and it works as expected in both FF and Chrome.

Thanks for your assistance.

Regards

Max

[Tom]

Transition is working now?

Flywheel is a very reputable company – there are no viruses.

[Max]

Tom

No not working.

Using your rollover code create the two bugs I described in my previous post.

I have tried to resolve them on my own but not able.

I am sure Flywheel is a reputable company. Problem is if you run it with panda cloud security installed it crashes your OS. I have reviewed flywheel site but can’t find any documentation on this issue. I am very happy with Panda. So if push comes to shove I would have to go with it and not flywheel.

Please let me know how I might resolve the bugs described above.

Kind Regards

Max

[Author]

Posts