Databases
StackOverflow2013
Postsdbo
POChanging img opacity with the use of css class in slider
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging img opacity with the use of css class in slider
    text
    copied!<p>I was following a tutorial to design a simple slider, I decided to mix some things and I encountered trouble. The slider tutorial was supposed to use the translate to slide images right and left, but I wanted to use a change in opacity values and stack images so I wouldn't need to use translate and maybe use a transition to smooth the effect at the opacity change. I accomplished the following with a div, but I'm having trouble using the same process with the images. This is what I accomplished so far: <a href="http://jsfiddle.net/6nLx5/1/" rel="nofollow">http://jsfiddle.net/6nLx5/1/</a>. The transition is supposed to happen at the moment you click the Image 1, image 2, Image 3 and Image 4 texts. The following is the css for the selected images</p> <pre><code>img_selected{ z-index:+11; -webkit-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0; -webkit-transition: opacity 2s ease; -moz-transition: opacity 2s ease; -o-transition: opacity 12s ease; transition: opacity 2s ease; } </code></pre> <p>The following code is for the unselected images within the slider.</p> <pre><code>.slider-photos img { position: absolute; width: 1000px; height: 500px; padding: 0; margin: 0; -webkit-opacity: 0.0; -moz-opacity: 0.0; opacity: 0.0; z-index:+10; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; } </code></pre> <p>Images are at opacity 0 since the class activation with jquery was supposed to make them visible, at the moment the class was toggled. Hope I was clear. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload