need css help for translucent effect

Discussion in 'Software' started by red death68, Jun 12, 2010.

  1. red death68

    red death68 Command Sergeant Major

    ok basicly iv finaly got free time so i wanna fix my myspace modules so only the body is translucent not the pictures or text within them iv seen a few post aboutr using css to do it but im new to the whole idea so im looking for a little bit of help can anyone help me
     
    red death68, Jun 12, 2010
    #1
  2. itmortiz

    itmortiz Corporal

    itmortiz, Jun 14, 2010
    #2
  3. red death68

    red death68 Command Sergeant Major

    its looks like it might be useful tyvm
     
    red death68, Jun 14, 2010
    #3
  4. red death68

    red death68 Command Sergeant Major

    ok i got the modules transprent like i wanted what i need to do now is add the mouse over effect from example 2 on this site http://www.w3schools.com/Css/css_image_transparency.asp

    heres what i got so far for my css code

    its a trimmed version of a code i found on the myspace forums now i want to add the mous over effect so the module comes in full color with no transparency once you put ur mouse over the module
     
    red death68, Jun 15, 2010
    #4
  5. Unbanable

    Unbanable Specialist

    For hover effects simply add :hover to the object you'll be hovering over, and set the transparency the same way you would otherwise. Because of the :hover, those css rules will only apply when the object is being hovered over.

    eg.

    .module:hover {opacity:1;filter:alpha(opacity=100);}

    filter: alpha... for IE
    opacity: 1 for other browsers

    Hope that helps
     
    Unbanable, Jun 24, 2010
    #5
  6. red death68

    red death68 Command Sergeant Major

    i have tried this and coding has been less then successful could you post a compl,ete version of the coding?
     
    red death68, Jul 21, 2010
    #6
  7. PC-XT

    PC-XT Master Sergeant

    Like this?
    Code:
    <html><head><title>Hover Test</title><style>
div,h1 {background:blue;text-align:center}

div.module {opacity:0.1;filter:alpha(opacity=10)}
div.module:hover {opacity:1;filter:alpha(opacity=100)}

</style>
</head><body>
<h1>Hover Test</h1>
Following is the simple test div:
<div class=module>Hover Test<br />This is a test to see if the hover works.</div>
I hope it works.
</body></head>
     
    PC-XT, Jul 21, 2010
    #7
  8. red death68

    red death68 Command Sergeant Major

    i just tried it and it didnt work just kept everything transpearent like the old coding i had in did
     
    red death68, Jul 21, 2010
    #8
  9. PC-XT

    PC-XT Master Sergeant

    For me, it works in FireFox, but in IE it is always opaque.
    I tried using
    Code:
    div.module {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";filter:alpha(opacity=10);opacity:0.1}
div.module:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}
    which http://www.quirksmode.org/css/opacity.html and https://developer.mozilla.org/en/Useful_CSS_tips/Color_and_Background say is supposed to work for old FireFox versions as well as IE 8, even in IE7 compatibility mode, but it still didn't work in IE. I tried adding position or zoom:1 or float:right, from http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/, which made it transparent, but not opaque on mouseover, though I can get it to work with an onmouseover script. lol

    There seem to be lots of bugs, or at least complications, with opacity in IE, but I did finally get this working, somewhat. IE only accepts :hover for an anchor <a href> element. I tried wrapping the div with <a class=module href="javascript://"><div>module</div></a>, and using
    Code:
    div.module,a.module{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10,enabled=true)";filter:alpha(opacity=10,enabled=true);-moz-opacity:0.1;opacity:0.1;zoom:1}
div.module:hover,a.module:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100,enabled=false)";filter:alpha(opacity=100,enabled=false);-moz-opacity:1;opacity:1;zoom:1}
    worked, but trying to put the anchor inside the div didn't work for me. I also still couldn't get text to show, but these links may help with that:
    http://cookbooks.adobe.com/post_CSS_Background_only_opacity-17440.html
    http://forums.adobe.com/message/2951735
    You may find a better way, and you probably don't need the zoom:1 part, since you already had something that made it translucent at first.
     
    PC-XT, Jul 22, 2010
    #9
  10. red death68

    red death68 Command Sergeant Major

    hmm sounds overly complicated maybe it wont work till ie 9 comes out in mean time i got other coding i can substitute for the time being but the mouse over effect doesnt want to work lol
     
    red death68, Jul 23, 2010
    #10
  11. Unbanable

    Unbanable Specialist

    Are you using Profile 2.0?

    I can't help you off the top of my head with making child objects opaque within a transparent parent object, but if all you're wanting to do is make modules+content transparent until mouseover, I have done the same for my profile and you can use my code. Just open up the profile customizer, go to the custom CSS section and add this:

    .moduleBody {
    opacity: 0.5;
    border: 2px dashed black;
    }

    .moduleBody div {
    filter: alpha(opacity=50);
    }

    .moduleBody:hover {
    opacity: .75;
    background-color: white;
    border: 2px solid black;
    }

    .moduleBody div:hover {
    filter: alpha(opacity=75);
    background-color: white;
    }

    Other CSS that you have written may conflict with my code, so if it doesn't work, try using it without any other css, and then piece by piece add your other css back in until you figure out what is conflicting.

    In my experience, most css errors that occur while trying to modify myspace profiles is due to improperly referencing the object you want to change. So, always double check the source code (which can be a bit of a task...) to make sure your reference is correct. If you need to, forget the transparency and add something that you know will show up, like a border, to make sure you are referencing the correct objects..

    The code that I posted I have been using quite a while. When I first modified my myspace profile to use it it worked in both my versions of Firefox and IE.

    Hope that helps.
     
    Unbanable, Jul 30, 2010
    #11
  12. red death68

    red death68 Command Sergeant Major

    well the effect works so ill tweak it a lil and that will be that tyvm i had pretty much given up on this idea
     
    red death68, Jul 30, 2010
    #12
  13. PC-XT

    PC-XT Master Sergeant

    Nice. So modern IE accepts at least div:hover, as well. I guess it was having trouble with a class name before :hover in the first code. It probably also accepts other tags before :hover, then.
     
    PC-XT, Jul 31, 2010
    #13
  14. red death68

    red death68 Command Sergeant Major

    ya it will work i just need to tweak it with a bit og my original coding because its making pictures transparent as well which is not exactly how i want it

    also i notice it only follows the hover command when the mouse goes over text is there a way to make it work when any part of the module is touched
     
    red death68, Jul 31, 2010
    #14

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds