Search the Community
Showing results for tags 'opacity'.
Found 6 results
-
[UPDATED IN ANSWERS] Attached updated files. I'm trying to extend a rather well-used animation formula using css. To start, here's the basic animation: http://www.daellusknights.com The banner text is set to a specific rotation, Animation 1. (two instances) Likewise, the "glow" effect is also animated. (Animation 2) What my goal is, the "layers" of each word are going to be statically faded out by setting each layer slightly more transparent than the one before it. This includes setting the text, stroke, and glow opacity. I'm using "h1:nth-child(#){code}" to set the primary properties of each layer such as Z-offset, etc. This is not a problem for making a transparency fade with the letters themselves. What I want to do is also apply the same transparency fade to the glow, but still have the colors animated. Is there a shorthand way to do this, or will it be necessary to synchronize a separate animation for each layer of the block of text? Each with it's own color animation, but with a set opacity? Thank you in advance! Christopher W. index.html dk-anim.css
-
Hi everyone, I am making a section of my webpage so that the image links will go from translucent to opaque during a cursor mouseover. However, there is an unintended effect - a little horizontal line (about 1 pixel by 5 pixels) appears at the lower right corner of the image link during the hover. Does anyone know how to make it so the little line does not appear? You can see the effect on http://www.jasonwangart.com - please see the top part of the sidebar, where the social media icon links are. I observed this effect on: Chrome 35.0.1916.114 Safari 7.0.4 (9537.76.4) Firefox 29.0.1 , all using Mac OS X 10.9.3 I have included an excerpt of the code I used below. I put this block of code inside a "HTML Gadget" in Blogger to create this part of the webpage. Thank you very much! Jason <!doctype html> <style> .jwsidebartopbox { /* code */ } .jwsidebartopbox:after { /* code */ } .jwblank1 { /* code */ } .jwsmlinksblock { /* code */ } img.opacify { opacity:0.4; } img.opacify:hover { opacity:1.0; } </style> <div class="jwsidebartopbox"> <div class="jwblank1"> </div> <div class="jwsmlinksblock"> Jason Wang Art is on: <br/> <br/> <a href="http://www.facebook.com/jasonwangart"> <img class="opacify" src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="30" height="30" alt="facebook"/> </a> <a href="http://twitter.com/jasonwangart"> <img class="opacify" src="http://4.bp.blogspot.com/-u9n6ecjgLqY/U4N0-QazobI/AAAAAAAAAaI/9gQByamXxak/s1600/LOGO+twitter+60+c.png" width="30" height="" alt="youtube" /> </a> <a href="http://plus.google.com/u/0/+jasonwangart1"> <img class="opacify" src="http://4.bp.blogspot.com/-Jc2l5PWP1Uo/U4N09HsH-SI/AAAAAAAAAZ0/e3YcGarRcwQ/s1600/LOGO+google++64+c.png" width="30" alt="google+" /> </a> <br/> /* code */ <br/> /* code */ <br/> </div> </div> </!doctype> -
The code instructions on the W3schools sample makes ALL the images on my webpage transparent on rollover.What do I do to have this apply only to certain images.I want the image I have on the left side of a home page to stay 100% opache but I want 4 boxes that become transparent on rollover, located in the #maincontent div on my home page.
-
Hi,I tried to apply this example on my website and it didn't work.The problem is that the text is also included in the opacity and then you get a transparent text: My website: My code: shaltermain.htmlmystyle.css thanks! -
I'm using the following code. By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.By clicking on the div again, it should slowly fade out and then disappear.Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".Is this a bug in Safari or is there something I could change to come back to the intended behaviour?One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.All other transitions on my site are working. But they all use only opacity and no visibility.Here's my code:CSS:#popUpPane { white-space:normal; position:fixed; width:100%; height:100%; top:0; left:0; text-align:center; vertical-align:middle; visibility:hidden; z-index:90; } #greyOut { position:fixed; width:100%; height:100%; top:0; left:0; background-color:#000; opacity:0; }#popUpPicCanvas { position:relative; top:50%; margin-top:-325px; display:inline; opacity:0; z-index:100; }.fade { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }HTML: <div id="popUpPane" onClick="noPopUp()"> <div id="greyOut" class="fade"> </div> <canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas> </div>Javascript:var popUpPane = document.getElementById("popUpPane"), greyOut = document.getElementById("greyOut"), popUpPicCanvas = document.getElementById("popUpPicCanvas"), popCanvasContext = popUpPicCanvas.getContext("2d");var doPopUp = function(source,x,y){ var popUpPic = document.getElementById("pic"+source); popCanvasContext.canvas.width = x; popCanvasContext.canvas.height = y; popCanvasContext.drawImage(popUpPic, 0, 0,x,y); popUpPane.style.visibility = "visible"; greyOut.style.opacity = "0.7"; popUpPicCanvas.style.opacity = "1";};var noPopUp = function(){ greyOut.style.opacity = "0"; popUpPicCanvas.style.opacity = "0"; popUpPane.style.visibility = "hidden";};I hope someone can help me.Thanks for your responds!
-
I've tried to use this to make the body background-color a bit of opacity: * { background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } It does not work on a background but a div.
