Post grid hover color

  • Resolved jcarlosc

    (@jcarlosc)


    5 years, 1 month ago

    Hello.

    How can I change the hover color in the post grid widget and the border-bottom menu color?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author livemesh

    (@livemesh)

    You can use the built-in customizers in the ‘Style’ tab of the element in the editor to change the border-bottom color. I see that you have already done the same.

    For changing the color of the background on image hover, you can try using pseudo elements for the IMG element as explained here with various examples –

    https://bryanlrobinson.com/blog/how-to-css-after-elements-for-background-overlays/

    Thread Starter jcarlosc

    (@jcarlosc)

    I have followed the tutorial without success.

    How can I add a class to each image individually?

    • This reply was modified 5 years, 1 month ago by jcarlosc.
    Plugin Author livemesh

    (@livemesh)

    I tried the below custom CSS and it worked – 

    /* Disable current hover */
.lae-portfolio-wrap .lae-portfolio .lae-portfolio-item .lae-project-image:hover img {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}

.lae-portfolio-wrap .lae-portfolio .lae-portfolio-item .lae-project-image:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    opacity: .7;
    z-index: 1;
}

.lae-portfolio-wrap .lae-portfolio .lae-portfolio-item .lae-project-image .lae-entry-info {
    z-index: 100;
}
    Thread Starter jcarlosc

    (@jcarlosc)

    It works, a lot of thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Post grid hover color’ is closed to new replies.