Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 7, 2017 at 5:29 am #773667
    cagraphicdesign

    Hi
    I am using a third party “hover effect” because I want to display a grid of logo images with each image revealing information when hovered over. I think I found a plugin that could work BUT I do not want your arrow in circle icon to appear on those logos.

    Also, let me know if you have another suggestion on how I can handle this idea of text being revealed when hovering over an image. It can even be a dropdown under the logo….I may have overlooked one of your shortcodes or features.

    See it here halfway down the page

    Leadership Learning

    April 7, 2017 at 6:06 am #773679
    John Torvik

    Hey cagraphicdesign,

    Thanks for using the Enfold :)

    Alright, let`s solve these questions.

    1. To remove the “arrow” inside the blue circle icon, just add the following custom CSS code at Enfold Theme Options > General Styling > Quick CSS

    
.avia_transform a:hover .image-overlay {
opacity: 0 !important;
}

    2.I think that you may add a simple and short description using the h3 or h4 tag to explain the logo.

    Best regards,
    John Torvik

    April 7, 2017 at 1:31 pm #773955
    cagraphicdesign

    For #1 Unfortunately, that custom code removes it from all pages and I just want it gone from one specific page shown above.
    As for #2 I will open a separate ticket as there will be quite a bit of copy there

    Thanks for your quick response

    April 8, 2017 at 6:18 am #774287
    John Torvik

    Hi,

    To apply this custom CSS code only in this page, add the following custom CSS code:

    
.page-id-664 .avia_transform a:hover .image-overlay {
opacity: 0 !important;
}

    Best regards,
    John Torvik

    April 8, 2017 at 2:45 pm #774515
    cagraphicdesign

    Hmmm. Not sure why it is not working. I wonder if it has to do with the way the “hover effects” plugin works. I create the effect within the plugin settings then a short code is created which I inserted in the text box on the actual page.
    I put this css at the end of all my css customizations:
    body {
    font-size: 15px;
    }

    #header_main .container, .main_menu ul:first-child > li a {
    min-width: 76px;
    }

    #footer { padding-top: 23px; padding-bottom: 20px; }

    #footer .widget {
    margin: 0;
    }
    .home #av_section_1 .content {
    top: -160px;
    }

    #top .scroll-down-link {
    color: #cf0a2c !important;
    font-size: 100px !important;
    }

    .av-fixed-rotator-width .av-rotator-text {
    width: 100%!important;
    text-align: center;
    }
    .cagd-indentbox .avia_textblock {
    max-width: 750px;
    margin: auto;
    }
    .sidebar .widget {
    margin-bottom: -30px;
    }
    .sidebar .widget {
    margin-top: -10px;
    }
    span.text-sep.text-sep-cat {
    display: none !important;
    }
    .slide-meta {
    display: none!important;
    }
    .blog .slide-entry-excerpt { display: none;
    }

    .slide-content .blog-categories {
    display: none;
    }
    .special-heading-inner-border {
    border-color: #BFB8AF!important;
    opacity: 1;
    }

    .avia-team-member {
    text-align: center;
    }

    .team-member-description {
    text-align: left;
    }
    .page-id-664 .avia_transform a:hover .image-overlay {
    opacity: 0 !important;
    }
    @media only screen and (max-width: 450px) {
    .av-image-caption-overlay-center {
    font-size: 28px !important;
    }}

    April 9, 2017 at 7:40 am #774788
    Vinay

    Hi,

    To remove the overlay icon only on the pages with logo please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .page-id-664 .image-overlay {
 visibility: hidden;
 }

    Best regards,
    Vinay

    April 9, 2017 at 2:25 pm #774955
    cagraphicdesign

    That did the trick! it fixed the other problem of the Hover Effects showing the text side in a screened back mode. Now it looks great! I notified the Hover Effects developer as well. You may close this ticket

    April 9, 2017 at 5:03 pm #775025
    Mike

    Hi,
    Glad Vinay & John were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘remove hover icon from just a specific page’ is closed to new replies.