Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 27, 2017 at 9:39 pm #869758
    Jason E

    I am trying to apply the following re-color to specific sections on the following page:

    Home

    /* Start Image Re-Color */
    .main_color.inner-entry { background-color: #006fba !important; }
    .grid-entry .inner-entry {
    margin: 10px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

    }
    .attachment-portfolio_small.size-portfolio_small.wp-post-image {
    mix-blend-mode: screen;
    -webkit-filter: grayscale(100%) contrast(100%);
    filter: grayscale(100%) contrast(100%);
    opacity: 1;
    }
    /* End Image Re-Color */

    What I need is a way to target only a specific applied class (.overlay-blue). I have run into problems with this in the past, and wanted a fresh suggestion from you on the best practices for achieving this.

    October 28, 2017 at 12:05 am #869785
    Jordan Shannon

    Hey Jason,

    You are looking to change the color of the image overlays?
    Best regards,
    Jordan Shannon

    October 28, 2017 at 12:19 am #869787
    Jason E

    If you look at the page as it stands, the bottom section applies a filter to those images in the portfolio grid. What I am asking is how to apply this to just one class of portfolio-grid images properly? Otherwise, all portfolio-grids will have the same filter applied. When I have tried to apply stuff to classes before where the dom is thick, it gets really messy. I am curious if there is a better way?

    October 30, 2017 at 5:49 am #870310
    Jordan Shannon

    Hi,

    So you want each image to have its own individual hover overlay filter?

    Best regards,
    Jordan Shannon

    October 30, 2017 at 6:55 am #870359
    Jason E

    No, just individual sections. So in one are on the home page, it has a blue filter applied, the rest remain full color.

    October 30, 2017 at 7:00 am #870361
    Jordan Shannon

    Hi,

    Okay I see. You can target the parent section they reside in. So for example the parent class for the bottom section is:

    
.avia-builder-el-last

    Best regards,
    Jordan Shannon

    October 30, 2017 at 6:12 pm #870604
    Jason E
    This reply has been marked as private.
    October 31, 2017 at 5:25 pm #870895
    Jordan Shannon

    Hi,

    I guess I’m just having trouble understanding the exact effect you’re trying to accomplish. The css you pasted above does not seem to be targeting the overlay at all, so when I use it I can’t get an idea of what the goal is.Do you want to remove the hover overlay completely on the images that are NOT in the bottom grid? If so add the following to quick css:

    .avia-builder-el-28 .image-overlay .image-overlay-inside{
display:none;
}

.avia-builder-el-28 .avia-content-slider .avia-content-slider-inner .slide-entry-wrap .slide-entry .avia_transform a:hover .image-overlay{
opacity:0!important;
}

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Best way to grab a class for rollovers’ is closed to new replies.