Tagged: , , , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 24, 2015 at 4:50 am #524170
    madebetter

    Hey there! :)

    Working on my WAY overdue website update (hote the 2014 url – YIKES!) I HAVE to finish this shenanigans before we ring in 2016! :D

    Anyhow – I’m using a third-party plugin called “Business Directory Plugin” to create my #mbnetwork business directory. Overall Enfold and this plugin seem to be playing pretty nicely together, except for one tiny little on-hover situation…

    http://2014.madebetterstudio.com/mbnetwork/mbnetwork-cat/marketing-professionals/

    When you hover over a provider’s image on the right of the directory item layouts – the first time you hover – the overlay shows up as a sliver at the top of the image (as if it’s not properly positioned). But! If you hover over the same image a second time – the overlay works perfectly!

    This issue doesn’t occur on the circular image in the footer either – just in the directory area, and just for the first hover, after that it works.

    So I *think* it might be something on the initial JS for the overlay… but I could really use your help in figuring out exactly where this isn’t jiving quite correctly on that very first hover of any directory image. :) I was hoping you could at least take a look and let me know if there’s anything you would suggest on how to fix the tiny issue I’m experiencing. I’m aware that you’re not required to provide support for any third party plugins, but I’m unsure if the issue I’m seeing is on the theme side or on the plugin side, so I figured I’d float my question by you to see if you could help you pinpoint what’s going on here…

    I really appreciate it! Thanks. :)

    October 27, 2015 at 8:28 am #525354
    Ismael

    Hi madebetter!

    Thank you for using Enfold.

    I’m not really sure why it fails to calculate the initial position of the image overlay on first hover. Try to remove the default image overlay then use this instead:

    .listing-thumbnail .image-overlay {
    display: none !important;
}

.listing-thumbnail:hover a:before {
    content: '';
    background: #fff;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: block;
    position: absolute;
    webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    border-radius: 100%;
}

.listing-thumbnail:hover a:before {
    opacity: 0.7;
}

.listing-thumbnail:hover a:after {
    content: "\E869";
    font-family: 'entypo-fontello';
    opacity: 0.5;
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.listing-thumbnail a:after {
    position: absolute;
    border-radius: 100%;
    background: red;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    z-index: 1000;
    text-align: center;
    color: #fff;
    content: "";
    font-size: 18px;
    font-weight: normal;
    opacity: 0;
    line-height: 80px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    webkit-transition: all;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    border-radius: 100%;
    -webkit-transform: rotate(-175deg) scale(0.2);
    transform: rotate(-175deg) scale(0.2);
}

    You can adjust the red and white background to something else.

    Cheers!
    Ismael

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