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,792
  • 7
  • 45
  • 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 Junior Howard
  • 2,427
  • 4
  • 29
  • 45