Colors on portfolio images on "mouse over

  • Unknown's avatar
    kayleneheck · Member ·

    On “mouse over” the portfolio images on our front page, the images display black with white text. Is there a way to change the background from black to some other color and possibly change the text color too?

    A Happiness Engineer gave me this CSS code, but it didn’t work. #front-page-portfolio .four>div>a {background-color: #ff0000; color: #00000; }

    Thank you.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, that color on hover is a rgb color with a transparency. We can adjust the level of the opacity with the following CSS. The last number, the 0.8 is the opacity. The closer to 0, the more transparent. The closer to 1, the more opaque. 

    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

    On the color the other HE gave, I tried this on your site and it worked for me. 

    #front-page-portfolio .four > div > a:hover {
    background-color: #ff0000;
    color: #000;
}

    What color do you want them to go to on hover, and do you want it to be completely opaque?

  • Unknown's avatar
    kayleneheck · Member ·

    Thank you for your reply and your answers

    Not sure exactly what background color we’ll use yet, but I can adjust that when we begin to use our real featured content images for the portfolio images.

    Regarding transparency, I think we’d like the background to be transparent. I’ve seen that effect on the Spoons theme that MOJO Marketplace has sold. It’s a nice effect. Anyway … I tried the following chunk for transparency but background is still opaque.

    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    }

    Thanks for including the extra chunk for transparency/opaque. If we can get it to work, it will be very nice.

  • Unknown's avatar
    thesacredpath · Member ·

    Hmm, that code worked for me. If you want it transparent, then use this: 

    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(0, 0, 0, 0);
    color: #000;
}

    It may be that the code just wasn’t interpreted by the Preview function. Did you try saving and looking at it on the site itself? If so, which browser and version did you see the issue in? Did you try a different browser by chance?

  • Unknown's avatar
    kayleneheck · Member ·

    As you’ve indicated, the following code yields a transparent background color …
    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(0,0,0,0);
    color: #000;
    }

    But what I’m really trying to do is have a color associated with a transparent background so I tried the code below but it creates a black transparent background instead of a medium blue transparent background, as I would expect. Is there some way to do what I’m trying to do? Thank you.

    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(79,95,ba,0);
    color: #000;
    }

  • Unknown's avatar
    kayleneheck · Member ·

    Just realized I probably need RGB values so tried this …

    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(121,149,186,0);
    color: #000;

    Same result. Transparent with no color for background.

    Is this something I can only do with JavaScript which WordPress.com doesn’t support?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, the fourth number in your color string is a 0, which means fully transparent. The last number has to have a value greater than 0 for you to see any color change. Something like this: 

    #front-page-portfolio .four > div > a:hover {
    background-color: rgba(121, 149, 186, 0.6);
    color: #000;
}
  • Unknown's avatar
    kayleneheck · Member ·

    This is great … looks wonderful! Thanks so much for the help!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Colors on portfolio images on "mouse over’ is closed to new replies.