WordPress.org

Ready to get started?Download WordPress

Forums

Transparent Featured Image Hover Code (7 posts)

  1. Calberici1
    Member
    Posted 3 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
    Member
    Posted 3 months ago #

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

  3. Adrian Houle
    Member
    Posted 3 months ago #

  4. Calberici1
    Member
    Posted 3 months ago #

    http://www.artofchristina.com

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

  5. Calberici1
    Member
    Posted 3 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
    Member
    Posted 3 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
    Member
    Posted 1 week ago #

    Here is the full CSS code for Transparent Image on HOver

    .pic{
    width:190px;
    height:190px;
    opacity: 1;
    filter: alpha(opacity=100);
    background: url(duck.png) no-repeat;
    }
    .pic:hover
    {
    opacity: 0.3;
    filter: alpha(opacity=30);
    }

    Full Source : Image Transparency - Hover Effect

    Eldo

Reply

You must log in to post.

About this Topic