• Resolved woodcreations

    (@woodcreations)


    I’ve looked through the code and edited what I thought was the right background color with no success. How do I change the background color when hovering over an image on the image post grid homepage? I have successfully reduced the opacity, but changing any background colors associated with that entity doesn’t do anything. I’d like the new background color to be #1a1a1a.

    .image-post .text-holder:hover {
        opacity: 0.75;
    	cursor: pointer;
    	    background-color: #beb27a;    
    		-webkit-transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
    }
Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter woodcreations

    (@woodcreations)

    Ideally, I’d like to adjust the opacity of the background color instead of the post title. The opacity in the code above adjusts both.

    Hey there,

    Can you please post a link to your site? Thanks!

    Thread Starter woodcreations

    (@woodcreations)

    It’s not public yet, so I’d rather not.

    Thread Starter woodcreations

    (@woodcreations)

    Found the color! It was the Image Post Format Hover Background. I was looking for the wrong current color to identify this as the culprit.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Just to confirm…everything is OK now?

    I probably should add that bit of info to the theme’s setup tutorials.

    Thread Starter woodcreations

    (@woodcreations)

    Yes, it’s all good.

    Hi, I was trying to make the same change as woodcreations regarding the image hover effect. I found out how to change the color in the theme customizer (I love all the customization options!) but I can’t figure out how to change the opacity in CSS. I tried the code mentioned above:

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

    But as WC said this makes both the hover color and the text transparent. What code can I use to keep the text at full intensity but have the color transparent? Thanks, and great theme by the way!

    I just looked through the rest of this support forum and see that this topic was addressed in another post:

    https://wordpress.org/support/topic/main-site-image-opacity/

    So now my question is which method is the best way to change the image hover opacity? It would be nice if the theme customizer could be used to change the color and then use a custom CSS plugin or child theme to change the opacity.

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

    (@shaped-pixels)

    @videosc…the method I posted in the https://wordpress.org/support/topic/main-site-image-opacity/ post is what you want to do.

    As a side note, rgba (colour with alpha transparency) is not a standard setting in the WP customizer (although I wish it was). However, with my latest theme I am building, I discovered a solution to that so that a theme can now have a colour setting that includes a transparency setting as well. For this theme, I might consider adding that as an option on a future update.

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

The topic ‘Image Post Grid Hover Background Color’ is closed to new replies.