[resolved]take a stab at this: Spotlight.js gradient overlay

[chef 3745]

Following instructions both on Stackoverflow, and on Codepen to add gradient overlays to images, I've been able to added a gradient overlay to the first frame of the 'wideSpotlightCard' in the theater by doing this with css:

.wideSpotlightCard:before{
        content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
         background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 39%, rgba(0,0,0,0.43) 91%, rgba(0,0,0,0.9) 100%); 
         background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 39%,rgba(0,0,0,0.43) 91%,rgba(0,0,0,0.9) 100%); 
         background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 39%,rgba(0,0,0,0.43) 91%,rgba(0,0,0,0.9) 100%); 
}

However, as you know the spotlight is destroyed each time it rotates, so although the first frame has an overlay gradient, the second frame won't because that frame is gone.

 

Looking at the Javascript I've attempted to add the class to the class list for the next frame like so:

newCardImageContainer.classList.add('.wideSpotlightCard:before');

where the 'newCardImageContainer' is the spotlight image.

 

that doesn't seem to bode well. An error occurs and no image shows.

 

My first thought is that, perhaps that class already exists on the object, so I wrote a conditional statement to check first:

if (!newCardImageContainer.classList.contains(".wideSpotlightCard:before")){
   newCardImageContainer.classList.add('.wideSpotlightCard:before');
} 

But, although it stops any errors from happen, a gradient overlay is still not present on any frame but the first one.

 

Perhaps it is that using Pseudo elements isn't best practice for applying gradient overlays to images?

 

Maybe I'm applying the overlay to the wrong object?

Edited August 10, 2017 by chef

[chef 3745]

The answer is!

 

Linear-gradient can be added to URL image in a request string.

 

backgroundImage = "gradient,image"

 

and this:

newCardImageContainer.style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.45) 39%,rgba(0,0,0,0.5) 91%,rgba(0,0,0,0.9) 100%), url('" + imgUrl + "')";

Make sure your z-index is right! Com'on chef....!

And wait for github servers to update... Rapid development...

Edited August 10, 2017 by chef