We Keep Coding

Image filter for brightness not working in Mozilla

i try to use some brightness filter on some image when people hover a mouse over it and it work well in chrome but in mozilla it seem not working at all.
Here is the simple CSS i used:
.imgsrc:hover {
-webkit-filter: brightness(120%);}
I've already tried couple css that support for mozilla like -moz-filter but my image is just disappear on hover when i use -moz-filter like.

The syntax that will work in firefox is
filter: brightness(1.2);
So in your case it would be
.imgsrc:hover {
filter: brightness(1.2);
-webkit-filter: brightness(120%);
}
<img class="imgsrc" src="http://i.stack.imgur.com/SBZoQ.png">

Rotating a div element

Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.

I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts

You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate

If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";

Image blur with CSS/Javascript: is it possible?

Is it possible to add a blur effect to an image using CSS and Javascript?

Yep, this works a treat:
Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more...
Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well...

Alternatively you could use StackBlur or Superfast Blur

This is also good to consider:
http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

Using CSS
.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}

StackBlur works: Here's how I'm using it:
also, works on all browsers and ipad!! unlike webkit!!
download StackBlur v5.0 from here: StackBlurv5.0
HTML
<CANVAS ID="top"></CANVAS>
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT>
CSS
#top {
border-radius: 28%;
-o-border-radius: 28%;
-webkit-border-radius: 28%;
-moz-border-radius: 28%;
position: absolute;
top: -2px;
left: -2px;
z-index: 40;
width: 208px;
height: 208px;
}
JS
var topCan = document.getElementById("top");
var toptx = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur = 0;
blur = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values
//based on a new slider position
stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);
NOTES:
Radius values for the stackBlurCanvasRGB function can range from I think 100 to -100.. just play with values, you'll get it working.
..CanvasRGB works faster than CanvasRGBA on iPad.. least that's what I'm noticing on iPad 4th gen.

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image. For Chrome
See live demo and complete source code here
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
}

Try this:
let blur = document.querySelector("#blur");
let girlImg = document.querySelector("#girlImg");
blur.addEventListener('input', blurring);
function blurring(){
girlImg.style.filter = `blur(${blur.value}px)`
}
<div>
<span>Blur:</span>
<input type="range" id="blur" min="0" max="50" value="0">
</div>
</br>
<img id="girlImg" src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="girlImg" />

PNG transparency issue in IE8

I'm having problems with a transparent PNG image showing black dithered pixel artifacts around the edge of the non transparent part of the image. It only does this in Internet Explorer and it only does it from a Javascript file it is used in.
Here's what I'm talking about...
http://70.86.157.71/test/test3.htm (link now dead)
...notice the girl in the bottom right corner. She has artifacts around her in IE8 (I haven't tested it in previous versions of IE, but I'm assuming it probably does the same). It works perfectly in Firefox and Chrome. The image is loaded from a Javascript file to produce the mouseover effect.
If you load the image all by itself, it works fine.
Here's the image...
http://70.86.157.71/test/consultant2.png
How to fix this?
The image was produced in Photoshop CS3.
I've read things about removing the Gama, but that apparently was in previous versions of Photoshop and when I load it in TweakPNG, it doesn't have Gama.

FIXED!
I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.

I put this into a jQuery plugin to make it more modular (you supply the transparent gif):
$.fn.pngFix = function() {
if (!$.browser.msie || $.browser.version >= 9) { return $(this); }
return $(this).each(function() {
var img = $(this),
src = img.attr('src');
img.attr('src', '/images/general/transparent.gif')
.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
});
};
Usage:
$('.my-selector').pngFix();
Note: It works also if your images are background images. Just apply the function on the div.

I know this thread has been dead some time, but here is another answer to the old ie8 png background issue.
You can do it in CSS by using IE's proprietary filtering system like this as well:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.

I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

PNG transparency prоblеm in IE8
Dan's solution worked for me. I was trying to fade a div with a background image. Caveats: you cannot fade the div directly, instead fade a wrapper image. Also, add the following filters to apply a background image:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */
Please note that the paths in the src attributes of the filters are absolute, and not relative to the css sheet.
I also added:
background: transparent\9;
This causes IE to ignore my earlier declaration of the actual background image for the other browsers.
Thanks Dan!!!

please try below code.
background: transparent\0/;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */

Dan Tello fix worked well for me.
One additional issue I found with IE8 was that if the PNG was held in a DIV with smaller CSS width or height dimensions than the PNG then the black edge prob was re-triggered.
Correcting the width and height CSS or removing them altogether fixed.

I use a CSS fix rather than JS to workaround my round cornered layer with transparent PNG inside
Try
.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}
This may require more work on ie9 or later.

Just want to add (since I googled for this problem, and this question popped first) IE6 and other versions render PNG transparency very ugly. If you have PNG image that is alpha transparent (32bit) and want to show it over some complex background, you can never do this simply in IE. But you can display it correctly over a single colour background as long as you set that PNG images (or divs) CSS attribute background-color to be the same as the parents background-color.
So this will render black where image should be alpha transparent, and transparent where alpha byte is 0:
<div style="background-color: white;">
<div style="background-image: url(image.png);"/>
</div>
And this will render correctly (note the background-color attribute in the inner div):
<div style="background-color: white;">
<div style="background-color: white; background-image: url(image.png);"/>
</div>
Complex alternative to this which enables alpha image over a complex background is to use AlphaImageLoader to load up and render image of the certain opacity. This works until you want to change that opacity... Problem in detail and its solution (javascript) can be found HERE.

My scenario:
I had a background image that had a
24bit alpha png that was set to an
anchor link.
The anchor was being
faded in on hover using Jquery.
eg.
a.button { background-image: url(this.png; }
I found that applying the mark-up provided by Dan Tello didn't work.
However, by placing a span within the anchor element, and setting the background-image to that element I was able to achieve a good result using Dan Tello's markup.
eg.
a.button span { background-image: url(this.png; }

CSS Cross-browser opacity from Javascript

I want to turn down the opacity on an element when a user performs an action.
The current code I have is:
document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.
This works on Firefox, Safari, etc. IE8 has different ideas about opacity. I have read a couple of articles but have yet to find a definitive answer on the most portable method to do this in a cross-browser way.

There are various browsers-specific settings and notations you need to take into consideration.
See Quirksmode.org: CSS2 - Opacity
I suggest using a Framework like JQuery, Prototype, MooTools or Dojo. I know it seems ridiculous to add dozens of kilobytes of code just for some opacity at first, but it's really worth it. It just works in one way for all browsers.

EDIT- Poster is using jquery..
Easy way:
$(el).css('opacity', '0.3');
(I checked the jquery sources, and it handles opacity for cross-browser compatibility automatically, so that should work)
Or for a CSS solution:
Just give it a class, e.g. 'transparent', and add this to your CSS file:
.transparent {
filter: alpha(opacity=30); /* for IE */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* old mozilla, netscape */
opacity: 0.3; /* good browsers: FF, safari, opera */
}

The equivalent should be document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';
By the way, even if you don't use a library like YUI or JQuery, you can download them and search their sources for the word
opacity
.