css "opacity" property not supporting - css

<style>
.imgopacity{
opacity:0.2px;
}
</style>
In the above CSS code, the opacity property is not supported, how to obtaining the opacity property if anyhow i want to have one.

Opacity property is not measured in pixels . its a ratio from 0 to 1 to indicate the transparency of an element so your code should be :
<style>
.imgopacity
{
opacity:0.2;
}
</style>

Try:
.imgopacity {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
/* IE 5-7 */
filter: alpha(opacity=20);
/* Old Mozilla */
-moz-opacity: 0.2;
/* Safari 1.x */
-khtml-opacity: 0.2;
/* Compliant browsers */
opacity: 0.2;
}

.imgopacity {
opacity:0.2;
}
Simply remove that px from your CSS code. The opacity property does not take value in pixels. It can take a value from 0.0 to 1.0. The lower the value, the more transparent the image will be. For browsers like IE8 and earlier use filter:alpha(opacity=x), where x is a value from 0 to 100.

Related

Animate with ease full colour and zoom for image

I'm using Slick Slider to create a carousel of product images. I've set all slides to be grayscale then I've set the current slide to be slightly bigger and full colour, this part works.
I want to make it a bit smoother though. Instead of it jumping to full colour and being bigger, how can I ease this? It'd be nice if the colour goes from grey to full colour and the size gets bigger gradually. (And then work in the opposite direction when not the current slide)
Is that possible?
The class slick-current get's added to the slide as soon as it's the active one.
.category-gallery .slick-slide {
zoom:1;
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: grayscale(100%); /* Current draft standard */
}
.category-gallery .slick-current {
zoom:1.3!important;
-webkit-filter: grayscale(0)!important; /* Old WebKit */
-webkit-filter: grayscale(0%)!important; /* New WebKit */
filter: grayscale(0%)!important; /* Current draft standard */
}
Use scale() rather than zoom. You can then use transition to animate the property changes.
I've used :hover here to simulate the class change:
.category-gallery .slick-slide {
transform: scale(1);
filter: grayscale(100%);
text-align: center;
transition: all 1s ease;
}
.category-gallery .slick-slide:hover {
transform: scale(1.3);
filter: grayscale(0%);
}
<div class='category-gallery'>
<div class="slick-slide">
<img src="http://placekitten.com/200/300">
</div>
</div>

CSS: cant use alpha filter [duplicate]

This question already has answers here:
How do I give text or an image a transparent background using CSS?
(29 answers)
Closed 5 years ago.
I am want transparency a screen and show the screen behind
my css:
.correct-answer {
background-color: #98CB66;
filter: alpha(opacity=60);
z-index: 10;
opacity: 0.7;
height: 100%;
width: 100%;
}
i tried use alpha filter in css,
and its not working
if you just want to apply opacity to background-color then you could convert your hex to rgb and use it with alpha
background-color : rgba(152,203,102,0.6);
In another case, if you want to apply opacity to whole block, then use CSS3 filter property.
-webkit-filter: opacity(60%); /* Safari 6.0 - 9.0 */
filter : opacity(60%);
Try Below CSS Snipet :
.yourselector {
background:#000;
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}

CSS property for IE8

What is the solution for rgba value and border radius value of 0.0 in IE8.
The error i get is
Value "rgba(250, 250, 250, .6)" is not supported. (8.0)
Property "-webkit-border-radius" is not supported. (8.0)
Option 1
http://jquery.malsup.com/corner/
Option 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
http://css3pie.com/
Option 4
http://www.netzgesta.de/corner/
Option 5
See this question
EDIT: Option 6
https://code.google.com/p/jquerycurvycorners/ - border-radius.
For rgba you can try create .png image with opacity and sat him as background
or try
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}

Alpha Filter and Gradient Filter

I have a issues with css filters for IE8 ... I have one div with gradient background and this div need to have opacity 0 .. when you hover with mouse over div he get opacity 1 ... my code look like this...
#myDiv {
filter: alpha(opacity=0);
opacity: 0;
background:rgba(75,29,79,0.85); /* For modern browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#D84B1D4F', EndColorStr='#D84B1D4F')"; /* For IE8 */
}
and then I have hover for this div
#myDiv:hover {
filter: alpha(opacity=100);
opacity: 1;
}
but it does not work .. I guess because it uses both filters, Is there an option that they work together?
Make sure that the display property is set for both. For instance: try setting display:block for the aforementioned div.
Also you can reset the transparency with -ms-filter: "";
Try:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#D84B1D4F",endColorstr="#D84B1D4F",GradientType=1);
Bear in mind that the first 2 digits of your rgb value are setting the opacity so there is no need to use opacity as well. You could use visibility:hidden for example.

exclude img opacity

I am trying this code:
<div id ="crop_image">
<img class="one" src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />
</div>
#crop_image:not(.one) {
width: 100%;
height: 100%;
background-color: red;
filter: alpha(opacity=20); /* internet explorer */
-khtml-opacity: 0.2; /* khtml, old safari */
-moz-opacity: 0.2; /* mozilla, netscape */
opacity: 0.2; /* fx, safari, opera */
}
However, the img still have opacity. What is wrong ?
demo
Mixing a few tricks (inline-block, absolute positioning, etc.) you can get a semi-transparent div to overlay an image.
demo
you can try this...(revised)
#crop_image img:not(.one)
I'm not sure what you're trying to do there, but I can explain why it is setting the opactiy to .2.
#crop_image:not(.one) means an element with the ID of crop_image which does not have the class of one. If you look at your crop_image it does not itself have the class of one so this will match. The crop_image contains an element which has the class of .one, but that is not what not does.

Resources