Tue, 2013-06-04 13:45
Hello,
Started to experiment on CSS3 transitions and if you look into the 1st image under products page, it has a mouseover fadein effect.
How can i have the black background stay %80 opacity when it fades in and the
element (available) %100?
One last thing, is there any way to vertically align the
element in the middle without using "line-height" property?
thanks in advance
burak
Tue, 2013-06-04 13:57
#1
sorry, forgot to post the
sorry, forgot to post the website: http://bakpinar.com/products.html
Tue, 2013-06-04 18:38
#2
solved the issue somehow, i
solved the issue somehow, i dont know how to edit the thread, i wanted to add SOLVED to the heading
Tue, 2013-06-04 20:41
#3
Good
If you will, describe the fix for others who may have a similar issue.
cheers,
gary
Wed, 2013-06-05 08:52
#4
OkProject: 1-Wanted to
Ok
Project:
1-Wanted to create a mouseover effect with css3 transitions where "Available" element with a black background color fades in with 50% opacity.
2-To have the background-color: black have %50 opacity and "Available" no opacity
For the 1st, code was:
.status { position: absolute; /* To place it exactly where we want it on each img*/ height: 138px; /* For the mouseover effect to work on the entire image */ opacity: 0; /* Not to see the effect in 1st place*/ -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .status p { line-height: 138px; /* to have the "Available in the middle */ height: 138px; /* For covering the actual image i used height&width */ width: 220px; color: white; background-color: black; text-align: center; } .status:hover { opacity: .5; /* %50 opacity on mouseover */ }
For the 2nd, code:
.status { position: absolute; /* To place it exactly where we want it on each img*/ height: 138px; /* For the mouseover effect to work on the entire image */ opacity: 0; /* Not to see the effect in 1st place*/ background-color: rgba(0, 0, 0, 0.5); /* Added the %50 black background here */ -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .status p { line-height: 138px; /* to have the "Available in the middle */ height: 138px; /* For covering the actual image i used height&width */ width: 220px; color: white; text-align: center; } .status:hover { opacity: 1; /* no opacity on mouseover */ }
Because background and <p> was acting the same way, i separated the background-color from <p> and added to actual status class with %50 and have the status:hover have no opacity.
This way, with mouseover, background fades in with %50 by default and "Available" with no opacity.
I hope this helps 
Wed, 2013-06-05 13:46
#5
Thank you
Very nice explanation.
cheers,
gary