Front Page Image Opacity on Hover Effects

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 4 months ago

    This is the code that handles the overlay, so you would need to just change the overlay colour setting in the customer for it to be black. Then do this custom cSS:

    .dark-overlay:hover {
    opacity: 0.4;
}

    The 0.4 means 4% opacity (transparency) on hover.

    Thread Starter russtalavista

    (@russtalavista)

    9 years, 4 months ago

    hi, sorry to be a pain. I’ve changed the color to black in the customizer and pasted the code in the ‘additional css’ section but nothing happened (see image below if i did it correctly)

    screenshot

    • This reply was modified 9 years, 4 months ago by russtalavista.
    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 4 months ago

    No worries…. basically you have this:

    /*
.dark-overlay:hover {
    opacity: 0.4;
}
*/

    But it should be this:

    .dark-overlay:hover {
    opacity: 0.4;
}

    The starting /* and the ending */ is a comment, or rather what that does when it surrounds CSS code is that it comments it out and disabled it. Make sure your custom CSS is not between the /* and */

    Thread Starter russtalavista

    (@russtalavista)

    9 years, 4 months ago

    thank you. removed that and put this

    .dark-overlay:hover {
    opacity: 0.4;
    }

    but still didn’t work.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 4 months ago

    My fault…should be this:

    .image-post .text-holder:hover {
    opacity: 0.4;
}

    By the way, did you just make one of the opacity’s as 40? 

    .dark-overlay {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #beb27a;
    opacity: 40;
}

    the 40 should be 0

    • This reply was modified 9 years, 4 months ago by Shaped Pixels.
    Thread Starter russtalavista

    (@russtalavista)

    9 years, 4 months ago

    thanks, it worked now <3

    and also I might have changed it into 40 so i turned it back to 0.

    many thanks for your help 🙂

    • This reply was modified 9 years, 4 months ago by russtalavista.
    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 4 months ago

    You are very welcome 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Front Page Image Opacity on Hover Effects’ is closed to new replies.

Tags