Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to unfade everything except the background image

    Hello,

    I'm trying to make the text and pictures at full opacity and keeping the background at it's current opacity. I've been playing around with this and haven't had any luck on resolving this issue.

    Any help at at all will help thanks.

    HTML

    Code:
    <article class="quotes">
        <div id="dark-bg">
        <h2>slip into something more profitable.</h2>
        <p>Bali is an incredible complement to our in-house communication team. After designating roles and objectives, we stick to our core competencies and they execute on theirs. It's nice to work with a team that really understands how to optimize the actual process of working with their clients.</p>
                            
        <h3>jane smith</h3>
        <p class="h3-quote">communications director<br/>3M canada<img src="images/sandals.png" width="265" height="199" /></p>
        </div><!-- end dark-bg -->
    </article>
    CSS
    Code:
    .quotes {
        height: 740px;
        width: 407px;
        display: inline-block;
        text-align: center;
        margin: 0 0 0 460px;
    }
    
    #dark-bg {
        margin: 0;
        padding: 0;
        width: 407px;
        height: 630px;
        background-color: rgb(156,48,19);
        opacity: 0.4;
    }
    
    #dark-bg h2 {
        padding: 89px 0 0 0;
        margin: 0 0 0 54px;
        text-transform: uppercase;
        color: #d77226;
        text-align: left;
        opacity: 1.0;
    }
    
    #dark-bg p {
        color: #fff;
        text-align: left;
        margin: 29px 100px 0 66px;
    }
    
    #dark-bg h3 {
       color: #d77226;
       text-align: left;
       text-transform: capitalize;
       margin: 25px 0 0 66px;
    }
    
    #dark-bg p.h3-quote {
       margin: 0 0 0 66px;
       padding: 0;
       color: #d77226;
       text-align: left;
       text-transform: capitalize;
    }
    
    #dark-bg img {
        display: inline-block;
        border: none;
        margin: 70px 0 0 0;
        padding: 0;
    }
    JSFiddle visual example:
    http://bit.ly/16Q7ufU

  • #2
    New Coder
    Join Date
    Sep 2013
    Posts
    41
    Thanks
    0
    Thanked 1 Time in 1 Post
    Try out this one:
    The opacity style affects the whole element and everything within it.
    You can change the opacity for each element.
    Below is the example code for changing opacity:
    <html>
    <head>

    <title>How to change opacity of an element in jQuery</title>
    <meta name="description" content="How to change opacity of an element in jQuery" />

    <style>
    body{
    text-align: center;
    }

    .button{
    margin-top:20px;
    font-size:16px;
    font-weight: bold;
    padding:5px 10px;
    }

    #box{
    margin:50px auto;
    width:500px;
    height:100px;
    color:#fff;
    padding:10px;
    background: orange;
    }


    </style>

    </head>
    <body>

    <input type="button" value="Change box opacity to 25%" class="button" name="0.25" />
    <input type="button" value="Change box opacity to 50%" class="button" name="0.50" />
    <input type="button" value="Change box opacity to 75%" class="button" name="0.75" />
    <input type="button" value="Change box opacity to 100%" class="button" name="1"/>

    <div id="box">Box</div>

    <!--
    We use Google's CDN to serve the jQuery js libs.
    To speed up the page load we put these scripts at the bottom of the page
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

    //When DOM loaded we attach click event to each button
    $(document).ready(function() {

    //when user clicks a button this event is fired
    $('.button').click(function(){

    //we added the value to the button's name attribute
    var opacityValue = $(this).attr('name');

    //this is where the magic happens
    //we select the box element and change the css opacity parameter
    $('#box').css('opacity', opacityValue);

    });

    });

    </script>

    </body>
    </html>

    Hope this helps.

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You also could do this
    Code:
    #dark-bg {
        margin: 0;
        padding: 0;
        width: 407px;
        height: 630px;
        background-color: rgba(156,48,19, 0.5);
        }
    The 0.5 is the opacity.
    Last edited by Dznr; 10-10-2013 at 06:35 PM.

  • #4
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Quote Originally Posted by priyankagound View Post
    Try out this one:
    The opacity style affects the whole element and everything within it.
    You can change the opacity for each element.
    Below is the example code for changing opacity:
    <html>
    <head>

    <title>How to change opacity of an element in jQuery</title>
    <meta name="description" content="How to change opacity of an element in jQuery" />

    <style>
    body{
    text-align: center;
    }

    .button{
    margin-top:20px;
    font-size:16px;
    font-weight: bold;
    padding:5px 10px;
    }

    #box{
    margin:50px auto;
    width:500px;
    height:100px;
    color:#fff;
    padding:10px;
    background: orange;
    }


    </style>

    </head>
    <body>

    <input type="button" value="Change box opacity to 25%" class="button" name="0.25" />
    <input type="button" value="Change box opacity to 50%" class="button" name="0.50" />
    <input type="button" value="Change box opacity to 75%" class="button" name="0.75" />
    <input type="button" value="Change box opacity to 100%" class="button" name="1"/>

    <div id="box">Box</div>

    <!--
    We use Google's CDN to serve the jQuery js libs.
    To speed up the page load we put these scripts at the bottom of the page
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

    //When DOM loaded we attach click event to each button
    $(document).ready(function() {

    //when user clicks a button this event is fired
    $('.button').click(function(){

    //we added the value to the button's name attribute
    var opacityValue = $(this).attr('name');

    //this is where the magic happens
    //we select the box element and change the css opacity parameter
    $('#box').css('opacity', opacityValue);

    });

    });

    </script>

    </body>
    </html>

    Hope this helps.
    Wow. You're good at ripping links and not giving credit to them.
    http://runnable.com/Ue-_DwnMKiIIAAAP...ment-in-jquery
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •