image opacity on hover

[Bones_Jones]

hi guys,

link
http://goo.gl/aY969e

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.

[Paulie_D]

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?

[Eric]

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.

[Bones_Jones]

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?

[Paulie_D]

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

Simple enough.

• Go to Codepen.io

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

• Copy the generated link.

• Paste back here.

[Bones_Jones]

k. i’ll give it a try!

also any idea where I can learn how to do this? click image and text drops down ?
http://cwbarchitects.com/person

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…

[Author]

Posts