[Resolved] Transition on div rollover

Home Forums Support Transition on div rollover

Viewing 15 posts - 1 through 15 (of 44 total)
  • Author
    Posts
  • #393380
    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

    GeneratePress 1.4
    GP Premium 1.4.3
    #393700
    Tom
    Lead Developer
    Lead Developer
    #393728
    Max

    Hey Tom

    Thanks for your prompt reply.

    Did you read the very first line in my post?

    Kind Regards

    Max

    #393842
    Leo
    Staff
    Customer Support

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

    Thanks!

    #393978
    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

    #393991
    Tom
    Lead Developer
    Lead Developer

    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.

    #393996
    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

    #393998
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #394001
    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

    #394010
    Tom
    Lead Developer
    Lead Developer

    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.

    #394023
    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

    #394027
    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…

    #394029
    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

    #394266
    Tom
    Lead Developer
    Lead Developer

    Transition is working now?

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

    #394276
    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

Viewing 15 posts - 1 through 15 (of 44 total)
  • You must be logged in to reply to this topic.