CODEWITHSUNDEEP
jqueryhtmlfade
JU1CY
JU1CY

Reputation: 123

fade div background on load

I'm working on fading div background on load, I found that example: jsfiddle The only problem if hides whole DIV and fade it, but I need to faded only DIV background. So DIV with its text or some html inside will be shown from the beginning and its background would be fading on load.

<div style="border: 1px solid #000000;">
<div class="feature">some text and info here</div></div>

Upvotes: 0

Views: 159

Answers (2)

Rick Calder
Rick Calder

Reputation: 18685

Absolutely position the text over top of the image, the fade affects the entire thing because your text is inside the div you're fading.

Fiddle example: https://jsfiddle.net/ubgyw1gt/3/

HTML

<div class="container">
  <div class="bgImageContainer"></div>
  <div class="feature"><span>Some text and stuff here</span></div>
</div>

CSS

.feature {
   width:100%;
   background:#fff;
   z-index:100;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }
 .container {
   height: 400px;
   width: 100%;
 }
 .bgImageContainer {
   display: none;
   background-color: white;
   background-image: url("https://placeimg.com/760/460/tech");
   background-size: cover;
   height:400px;
   width: 100%;
   z-index:0;
   position: absolute;
 }

JS

$(document).ready(function(){
    $(".bgImageContainer").fadeIn('slow');
})

Upvotes: 2

Elton Viana
Elton Viana

Reputation: 301

You can't fade just the background div (because, by inheritance, all children will be faded too). But you can change the setted css properties to a "default" one or create a class just for loading purposes.

An example would be:

HTML:

<div id="parent" class="loading">
  <div class="feature">some text and info here</div>
</div>

CSS:

.loading {
  background-color: black;
}

JS:

$(document).ready(() => $('#parent').removeClass('loading'));

Upvotes: 0

Related Questions