eduard Posted January 21, 2013 Share Posted January 21, 2013 I want to use Image Transperency! What's wrong in my codes: <!DOCTYPE html> <html> <head><link rel="stylesheet" type="text/css" href="ex1.css"><title>Eduard Lid</title></head> <body> <div id="container"><p id="name">Eduard Lid</p><ul id="flags"><li><a href="#">us<span id="amer"></span></a></li><li><a href="#">es<span id="spanish"></span></a></li></ul></div> <div id="main"><img id="coral" src="coral.jpg" alt="coral"><ul id="links"><li><a href="american.html">more</a></li><li><a href="spanish.html">más</a></li></ul> </div> <div id="bottom"> <p id="design">web<br>design diseñar <span id="copyright">Copyright © 2013</span></p> <a href="http://ar.linkedin.com/in/eduardlid"> <img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" alt="Ver el perfil de Eduard Lid en LinkedIn"/* Rotate div */ </a> </div> </body></html> * { margin:0; padding:0; list-style-type:none; }body{ font: bold 15px arial,geneva,SunSans-Regular,sans-serif; background-color:#000000; } #container{ clear:both; position:relative; background-color:#000000; width:100%; height:120px; } #name{ font-size:50px; color:#7fff00; text-align:center;} #main { clear:both; position:relative; height:280px; background-color:#000000; } #bottom {background-color:#000000;height:80px;} links { float:left; padding:10px 0 0 100px; font-size:12px; }#links li { margin-bottom:5px; } #links a { color:#ffffff; } #links a:hover { color:#696969; }#flags { float:right; width:256px; height:20px; margin:10px 0px; } #flags li { position:relative; float:left; width:24px; margin:0 2px; font-size:8%; font-weight:normal; } #flags a,#flags span { position:relative; display:block; width:20px; line-height:2px; font-size:0%; font-weight:normal; } #flags span { position:absolute; top:0; left:0; width:-6px; height:24px; background-position:0 -2px; } #flags span:hover { box-shadow:#eef 0 0 0px; } #amer { background-image:url(americanflag.gif); } #spanish { background-image:url(spanishflag.gif);} #coral {border-left:4px solid grey;border-right:4px solid grey;border-top:4px solid grey;border-bottom:4px solid grey;width:500px; height:280px;margin:430px;margin-top:0px;margin-bottom:0px;} #coral {opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */} #design { position:relative; font-size:50px; color:#7fff00; text-align:center;margin-bottom:0px; }#copyright { position:absolute; top:40px; right:100px; font-size:10px; color:#fff; } #LinkedIn { width:120px; height:33px; border:0px; } #rot {transform:rotate(-30deg);-ms-transform:rotate(-30deg); /* IE 9 */-moz-transform:rotate(-30deg); /* Firefox */-webkit-transform:rotate(-30deg); /* Safari and Chrome */-o-transform:rotate(-30deg); /* Opera */} Link to comment Share on other sites More sharing options...
dsonesuk Posted January 21, 2013 Share Posted January 21, 2013 using selector #coral wil take precedence over just img:hover, use #coral:hover instead. Link to comment Share on other sites More sharing options...
eduard Posted January 22, 2013 Author Share Posted January 22, 2013 (edited) Thanks, it now works! But I don't understand that the size of the image changed! I solved this problem by changing 1 of 4 class into a div. But wht? Edited January 22, 2013 by eduardlid Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2013 Share Posted January 22, 2013 ???? who? what? when? how? Link to comment Share on other sites More sharing options...
eduard Posted January 22, 2013 Author Share Posted January 22, 2013 Why is image transparency now working also outside my image? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2013 Share Posted January 22, 2013 Well with information given, my guess you probably did something wrong. Link to comment Share on other sites More sharing options...
eduard Posted January 22, 2013 Author Share Posted January 22, 2013 Well with information given, my guess you probably did something wrong. Probably ...... Link to comment Share on other sites More sharing options...
dsonesuk Posted January 22, 2013 Share Posted January 22, 2013 not probably more than likely, i think. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now