0

I made a slider with pure css and I want to set the background opacity of each background-image (so, that I can give it a nice fade animation). I know that I could use css generated content to add image using opacity: 1; property but I have a lot of css code so is there any easy way to get around this?? without any generated content or psuedo-elements??

/************ SLIDER ************/
/*this contains the slides which are inside a wrap*/
#slide-Panel{
    width: 100%;
    height: 40%;
    overflow: hidden;
}

/*this contins the slides*/
.wrap{
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    text-align: center;
    overflow: hidden;
}

.slide{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    background: #000;
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size: cover;
    padding: 2em 2em;
    color: white;
    font-size: 1em;
} 

.slide a {
    background: #0FCABF;
    padding: .6rem 1.6rem;
    color: white;
    font-weight: 700;
    margin: 1rem;
}

.wrap input[type="radio"]{
    position: absolute;
    z-index: 200;
    bottom: 10%;
    left: auto;
    right: auto;
}

.wrap input[type="radio"]:nth-of-type(1){
    margin-left: -1.2rem;
}

#slider-2-trigger{
  margin-left: .4rem;
}

.slide-two{
    background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/35VYJ0NK0V.jpg');/*change the opacity of these images*/ 
}


.slide-one{
    background-image: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1175');/*change the opacity of these images*/
}

[id^="slider"]:checked + section {
    z-index: 100;
    left: 0;
}


.slide :not(img){
    display: none;
}

.slide img{
    opacity: .6;
    width: 220px;
    height: 148px;
    margin: 2em auto;

}
varun teja
  • 244
  • 3
  • 10
  • Place your code here in snippet, or JSFiddle. – Narek-T Dec 19 '15 at 13:57
  • 2
    Take a look at this http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements – Nenad Vracar Dec 19 '15 at 14:15
  • You need to add a working snippet to show exactly what you want, as it is difficult to understand from your question/css only. – Asons Dec 19 '15 at 16:03

1 Answers1

1

There is no direct way to change the opacity of a background image.

But here's a workaround, please try this.

Here's the code you should use:

div::after {
  content: "";
  // Add your background image here
  background: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg");
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

And the JSFiddle to it.

Clemens Himmer
  • 1,340
  • 2
  • 13
  • 26
  • This linked sample also uses `opacity:`, which OP doesn't want, which make it _not a workaround_, and please don't use link only answers. It might give you a lot of down votes. – Asons Dec 19 '15 at 15:58
  • I don't know but i understand "I want to set the background opacity of each background-image" in that he wants to change the opacity... – Clemens Himmer Dec 19 '15 at 16:01
  • OP writes to _not use `opacity`_, still you add an answer using it. – Asons Dec 19 '15 at 16:02
  • Please show me where he says he doesn't want to.. i read OP's question three times now, i must be blind if it's in there. – Clemens Himmer Dec 19 '15 at 16:07
  • _I know that I could use css generated content to add image using opacity: 1; property but I have a lot of css code so is there any easy way to get around this??_ ... You don't see in this quote the OP wants to "get around this"!! – Asons Dec 19 '15 at 16:12
  • No need to get "loud" with those double exclamation marks. The whole content of this sentence seems more like gibberish than anything, and he adds a _without any generated content??_ at the end, which indicates he wants not to use _generated content_, not don't use `opacity`. Additionally if he meant not to use `opacity` this would stand in conflict with _I want to set the background opacity of each background-image_ at the beginning of his question. After all, the question is phrased poorly, and OP should rephrase it, currently it is more speculation than anything what OP actually wants. – Clemens Himmer Dec 19 '15 at 16:20
  • Sorry about the "screaming" ... and exactly, poorly asked question, which one shouldn't answer with a guess of what you think s/he wants, instead ask OP to be more clear what s/he wants before adding an answer. – Asons Dec 19 '15 at 16:26
  • I understand your position, but see a bit of hypocrisy here, since you assumed too and - i'll assume you were the one who downvoted me, i am sorry if you didn't - downvoted me because you interpreted as in OP doesn't want to use opacity. And as the first sentence clearly indicates he wants in some way to change the opacity of the background-images which is only achievable by my approach. PS: I think the upvote i got was by OP, and he's now out coding something else and done with this. – Clemens Himmer Dec 19 '15 at 16:32
  • I down voted all as they were at the time poor answers. As soon as they are not, I consider remove my down vote and might even give an up vote. As the OP hasn't been around since 2 hours he couldn't give you the up vote. I never assumed with guessing an answer, I asked in a comment and is now waiting for an answer. .. PS If you check the other answers you'll see one where the OP commented, which proves me less of a guesser. – Asons Dec 19 '15 at 16:43
  • And I also voted to close the question as it is too unclear, which might give a hint why I also downvoted the answers. – Asons Dec 19 '15 at 16:52
  • Lets agree that we have different perspectives. Bottom line, none of our dialog here brings any good to the question, would you agree to delete them all? – Asons Dec 19 '15 at 17:28
  • I've experienced OP's upvoting and abandoning quesions, especiall new users. But i agree that it has no productive purpose, yes, but i won't delete this conversation, i always stand by my statements and would feel uncomfortable. – Clemens Himmer Dec 19 '15 at 17:53
  • Well, this has nothing to do with not standing for ones statements. I'll leave it for now, and try not judge all new users doing such, that's a bad habit. – Asons Dec 19 '15 at 18:23
  • I didn't, i experienced it especially new users, not judging at all, i am a "new user" too, as i started participating in answering stuff just the day before yesterday. But whatever, have a nice day and let's just end this conversation. – Clemens Himmer Dec 19 '15 at 18:37
  • 1
    sorry, if my question offended you in any manner maybe i was a bit unclear. ya i did use `::before` pseudo-elements and used the transistion to get the desired effect.i upvoted but your answer doesn't answer doesn't answer my question exactly!! – varun teja Dec 19 '15 at 18:52
  • Glad it worked after all! I guess you used just what i answered, but with ::before pseudo rather than ::after? – Clemens Himmer Dec 19 '15 at 19:16