CSS opacity 0.2 - jquery set opacity 1.0 - But 1.0 will be maximum of 0.2?

Question

Smoetimes i hate CSS and more importanly javascript (in this case, jQuery). I've got the following:

#project {
    opacity: 0.2;

    float: left;
    margin: 10px;
}

And in my HTML i've got:

<script type="text/javascript">
    $('#project img').hover(function() {
        $(this).fadeTo("slow", 1);
    });
</script>

<div id="project">
    <div id="img"><img src="..."></div>
    <p>Title:</p> ...
</div>

But for some reason, i can't fade to 1.0 because 1.0 being the maximum value of the opacity which is set to 0.2 in my CSS file. If i do fadeTo("slow", 0.5); concequently it will fade to 0.1.

How can i, in a simple way animate a "fade in" from a predefined 0.2 opacity to full opacity?

Edit: The CSS part is loaded on the first page load, the HTML part is loaded via AJAX ($("#content").load($(this).text() + ".html");) later on.

You can't have the child (`img`) be less transparent than the parent (`#project`), if that's what you want. — Prinzhorn, Jul 16 '13 at 12:30
You're setting `#project` to `opacity:0.2` but not the `image` opacity, so hovering on the image won't do anything. — Nick R, Jul 16 '13 at 12:31
Just figured out it. I'm trying to set the `img` opacity to `1.0` but the parent `div` is the one that has the opacity.. geez i'm stupid.. — Torxed, Jul 16 '13 at 12:31

score 4 · Accepted Answer · answered Jul 16 '13 at 12:32

4

You can't have the child (img) be less transparent than the parent (#project), if that's what you want.

This is not jQuery or JavaScript related at all.

answered Jul 16 '13 at 12:32

Prinzhorn

22,120
7
61
65

Yepp, you've got it :) You'll get the points as soon as i can mark it as solved. Gha been working on this for a few hours and just as i wrote the question i noticed it myself >_ – Torxed Jul 16 '13 at 12:33

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

The opacity of a child element cannot "override" the opacity of its parent element.

If it is feasible, you may specify your opacity for #project using rgba() colours for color and background-color properties. The alpha property is not inherited by descendent elements as opacity.

edited May 23 '17 at 10:25

Community

1
1

answered Jul 16 '13 at 12:33

rink.attendant.6

44,500
61
101
156

Archna Rangrej · Answer 3 · 2013-07-16T12:56:23.193

See this Fiddle.

Fiddle

It will be helpful.

To change The Css like :

#project img{
    opacity:0.2;

    float: left;
    margin: 10px;
}

Code:

<script type="text/javascript">
    $(document).ready(function() {

        $('#project img').hover(function() {
            $(this).fadeTo("slow", 1);
        });
    });
</script>

<div id="project">
    <div id="img"><img src="..."></div>
    <p>Title:</p> ...
</div>

I modify your code.Now see

score 0 · Answer 4 · answered Jul 16 '13 at 12:40

0

try this #project img { opacity: 0.2; float: left; margin: 10px; }

answered Jul 16 '13 at 12:40

Manoj Meena

244
1
5

That would some what work, but the parent div would still be opaque and that's not my goal :) – Torxed Jul 16 '13 at 12:41

CSS opacity 0.2 - jquery set opacity 1.0 - But 1.0 will be maximum of 0.2?

4 Answers4