The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS image opacity on hover

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #237381

    hi guys,


    i basically want the image effect to be reversed. i want the images to have opacity and then no opacity on hover.

    so this is what i tried, but didn’t work…

    div.portfolio-media-wrapper.gdl-image a.hover-wrapper{ display: block;
    position: absolute; width: 100%; height: 100%; opacity: 0.75; filter: alpha(opacity=75); background:#fff;
    transition: none; -moz-transition: none; -o-transition: none; -webkit-transition: none; }

    div.portfolio-media-wrapper span.portfolio-thumbnail-image-hover{
    position: absolute; left: 0px; right: 0px; bottom: 0px; height: 0px; background:none; opacity: 1; filter: alpha(opacity=100);}

    div.portfolio-media-wrapper span.hover-icon{
    background:none; opacity: 1; filter: alpha(opacity=100); top: 50%; left: 50%; margin-left: -18px; margin-top: -18px; width: 36px; height: 36px; display: none;
    position: absolute; }

    is this even doable? or is it like JS stuff? help! thx in advance.


    You know what we’re gonna say…right?

    Codepen demos are infinitely preferable to links and spare bits of code.

    And I’m assuming you mean the overlay opacity and not the image?


    css might not help because javascript is whats making those hover changes instead of css.
    the class .portfolio-thumbnail-image-hover is gaining height with javascript.


    sorry, I just don’t know how to use code pen…

    anyway this works!
    div.portfolio-media-wrapper.gdl-image a.hover-wrapper{opacity: .5;}
    div.portfolio-item .portfolio-media-wrapper img {opacity: .6;}
    div.portfolio-item:hover .portfolio-media-wrapper img {opacity: 1;}

    but looks kinda weak. is there a way to add an easing effect?


    sorry, I just don’t know how to use code pen…

    Simple enough.

    • Go to

    • Add enough HTML, CSS etc to demo the problem.

    • Copy the generated link.

    • Paste back here.


    k. i’ll give it a try!

    also any idea where I can learn how to do this? click image and text drops down ?

    basically I want to create the ‘people’ page in 1 page. I don’t want to create individual pages. I want to click image and make the texts appear below…. I don’t even know what this is called…

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.