tween the background-url only ?

[retropunk]

I have a CSS class

 

CSS:

.case-section{background:url(image.jpg) no-repeat;}

HTML:

<div class="case-section">
     <div class="logoHolder">
         <a href="#"><img src="image.png"/></a>
            <span class="logoPunch"></span>
        </div>
        <div class="headingHolder">
         <h2>The Client</h2>
            <p>lorem ipsum</p>
            <h2 class="marginTop25">Header</h2>
            <p>more text here</p>
        </div>
</div>

JS:

var bgImage : $('.case-section').css('background-image')
TweenLite.from(this.bgImage, .5, {opacity:0});

Thanks for any help

- P

[Rodrigo]

Hi

 

Check this link:

 

http://css-tricks.com/snippets/css/transparent-background-images/

 

Using the cssRule plugin you could achieve that.

 

Hope this helps

Cheers

Rodrigo

[jamiejefferson]

Just to clarify - there is no ability in CSS to modify a background-image's opacity at all.

 

The only way to achieve this would be the method Rodrigo suggested (tweening the opacity of a pseudo background element with CSSRulePlugin) or by adding another div to your element with it's own background image, and tweening the opacity of that div.

 

Check it out:

See the Pen qmfJy by jamiejefferson (@jamiejefferson) on CodePen

[retropunk]

Thx guys. It was good to learn how to use the CSSRule Plugin. Turns out its easier to refactor the code and add the image through a div and not CSS.

 

This was helpful.

Thx again.