3

I want to change the opacity of the background image but not to the content over that image. Can anyone suggest how to do it with CSS transition.

http://jsfiddle.net/RcQTH/

<div class="gd_col">
    <div class="rat" id="clth">
        <!--<a class="nav_list">-->
        <div class="title_box">
            CLOTHING
            <span class="arrow_click"></span>
        </div>
        <div class="content_x">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM134e2axCCV2ugnDbtDyGIQcY2RTlYnU_6-skesMXm8CMIw5e" />
        </div>
        <!--</a>-->  </div>
    <div class="add_links" id="al_1">
        <ul>
            <li><a href="#">For Men</a></li>
            <li><a href="#">For Women</a></li>
            <li><a href="#">For Kids</a></li>
            <li><a href="#">Featured Deals</a></li>
            <li class="view_all"><a href="#" class="view_all_links">View All&nbsp»</a></li>
        </ul>
    </div>
</div>
ankitr
  • 5,992
  • 7
  • 47
  • 66

1 Answers1

1

You have to spilt your div "add_links" into 2 separate divs. One for the black background and another for the links ontop of it. You can't set a parent div to be .2 opacity and it's children elements to be anything greater than .2 opacity, it will always get it's higher value from it's parent element.

Andrew Howard
  • 2,818
  • 5
  • 33
  • 59