chef 3745 Posted August 10, 2017 Share Posted August 10, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
chef 3745 Posted August 10, 2017 Author Share Posted August 10, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now