Ready to get started?Download WordPress


Transparent Featured Image Hover Code (7 posts)

  1. Calberici1
    Posted 4 months ago #

    I just wanted to know if I could make the featured image semi transparent when someone hovers over to click on it.

    I want to get rid of the project titles so that it can be all about the imagery, but when I take away the title what's left is the solid grey box when hovering over to click.

    Any help with this would be greatly appreciated!

    Here is the website:

  2. Andre
    Posted 4 months ago #

    I didn't get the website. Its not showing. I would like to help.

  3. Adrian Houle
    Posted 4 months ago #

  4. Calberici1
    Posted 4 months ago #


    Thank you so much! (I don't know why it's not showing)

  5. Calberici1
    Posted 4 months ago #

    Also I'm sorry to bother again but where would I put an opacity code in the editor for the featured images?

  6. Adrian Houle
    Posted 4 months ago #

    You have a CSS editor then?

    You should learn to use the chrome developer tool and then you could figure this out on your own.

    #project-float-2 > a > img:hover {
    opacity: 0.5;

    Also I just noticed as I tried this out that it does not look good. It must have something to do with the way opacity actually works. I wonder if you need a background for the images to create the effect you want. I'm just a programmer so arts not my thing, but given this tool maybe you can figure out how to mix the colors to get what you want.

  7. eldoraman
    Posted 1 month ago #

    Here is the full CSS code for Transparent Image on HOver

    opacity: 1;
    filter: alpha(opacity=100);
    background: url(duck.png) no-repeat;
    opacity: 0.3;
    filter: alpha(opacity=30);

    Full Source : Image Transparency - Hover Effect



You must log in to post.

About this Topic