CSS opacity

Hi,
I want to have an image that is faded out and upon hover fades in.
I know to set the image opacity to .25 makes it faded out, but what is the code to make it fully viewable again - 100% doesn't appear to work..
LVL 2
jdav357Asked:
Who is Participating?
 
remorinaConnect With a Mentor Commented:
Hi Jdav357,
Opacity will work and this can be done simply with just 2 lines of CSS.
In order to make the hover work add the image within an anchor so you can make the hover a valid css then give the opacity to the image in CSS as the example below

Cheers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Opacity</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
                a.opacityimg img{filter:alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;}
                a.opacityimg:hover img{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
        </style>
    </head>
    <body>
        <div>
            <a class="opacityimg"><img src="http://www.myride.com/images/myride/default-car.jpg" /></a>
        </div>
    </body> 
</html>

Open in new window

0
 
Adoryc666Commented:
If you set it to 1.0 it should go back to fully viewed.
0
 
LZ1Commented:
In order to make it fully viewable, you would just delete or comment out the opacity line in your CSS.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
koolinCommented:
See example 2 on the w3schools page on opacity, sounds exactly like you are trying to do.

http://www.w3schools.com/Css/css_image_transparency.asp
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Open in new window

0
 
SAM1Connect With a Mentor Commented:
Try following Code
place your image under \images folder
replace image source in HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Web Page">

<style type="text/css">
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

</head>

<body>

<div style="position:absolute; top:92; left:163; z-index:0">
<script language=JavaScript>
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;

//change the opacity for different browsers
function changeOpac(obj, opacity) {
	var object = obj.style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function BeginOpacity(obj, s, e)
{
	start = s;
	end = e;
	currentOpac = s;
	theobject=obj;
	changing=setInterval("opacityit(theobject)",itv);
}

function EndOpacity(obj, end){
	clearInterval(changing);
	changeOpac(obj, end);
}

function opacityit(obj){
	if(start > end) {
		if (currentOpac>end){
			currentOpac = currentOpac - step;
			changeOpac(obj,currentOpac);
		}
		else if (window.highlighting)
			clearInterval(highlighting);
	} else if(start < end) {
		if (currentOpac<end){
			currentOpac = currentOpac + step;
			changeOpac(obj,currentOpac);
		}
		else if (window.changing)
			clearInterval(changing);
	}
}
//-->
</script>

<a href="#"><img src="images/imagesCAF5QHQ3.jpg" width="50" height="50" border="0" style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)></a>
</div>
</body>
</html>

Open in new window

0
 
JuamezConnect With a Mentor Commented:
I have discovered that the following doesn't work in IE8 using javascript:

image.style.filter = "alpha(opacity=" + opacity + ")";

Instead I have to include the namespace of the Alpha component:

image.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity = '+opacity+')';

So I took the code from SAM1 and changed the line that didn't work for me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Web Page">

<style type="text/css">
DIV,UL,OL /* Left */
{
 margin-top: 0px;
 margin-bottom: 0px;
}
</style>

</head>

<body>

<div style="position:absolute; top:92; left:163; z-index:0">
<script language=JavaScript>
<!--
var itv = 50;
var step = 10;
var start = 0;
var end = 0;
var currentOpac;

//change the opacity for different browsers
function changeOpac(obj, opacity) {
	var object = obj.style; 
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
}

function BeginOpacity(obj, s, e)
{
	start = s;
	end = e;
	currentOpac = s;
	theobject=obj;
	changing=setInterval("opacityit(theobject)",itv);
}

function EndOpacity(obj, end){
	clearInterval(changing);
	changeOpac(obj, end);
}

function opacityit(obj){
	if(start > end) {
		if (currentOpac>end){
			currentOpac = currentOpac - step;
			changeOpac(obj,currentOpac);
		}
		else if (window.highlighting)
			clearInterval(highlighting);
	} else if(start < end) {
		if (currentOpac<end){
			currentOpac = currentOpac + step;
			changeOpac(obj,currentOpac);
		}
		else if (window.changing)
			clearInterval(changing);
	}
}
//-->
</script>

<a href="#"><img src="images/imagesCAF5QHQ3.jpg" width="50" height="50" border="0" style="FILTER: alpha(opacity=40);-moz-opacity: 0.4; opacity: 0.4;" onmouseover=BeginOpacity(this,40,100) onmouseout=EndOpacity(this,40)></a>
</div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.