I have a small gallery of images side by side it already has opacity 0.1 and the mouse over one of the images the opacity effect becomes brighter 1.0 only I want to make an automatic change of the images keeping the opacity my gallery is in the footer of my page I wanted it to be like a Slide shows.
would have to be done with java script follow my code below
#footer {height: 71px;background-color: #000;overflow: visible;background-repeat: repeat-x;border-top: 1px solid #000;}
#photos {position: relative;}
#photos ul {margin:0px;padding:0px;list-style:none;}
#photos ul li {width:71px;height:71px;float:left;opacity:0.2;webkit-transform:translatez(0);-webkit-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-o-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-webkit-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-o-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);}
#photos ul li:hover {opacity:1;webkit-transform:translatez(0);-webkit-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-o-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-webkit-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-o-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);}
#photos ul li a {width:71px;height:71px;float:left;}
#photos ul li a img {float: left;width: 71px;height: 71px;}<section id="footer"><div id="photos"><ul>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/myidol-icone.jpg"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/levitagram-icone.png"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/retrica-icone.jpg"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/scr-recorder-android-icone.jpg"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/stickered-for-messenger-icone.png"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/adobe-photoshop-cc-icone.png"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/43500000.jpg"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/easydowloader-for-instagram-icone_002.png"alt=""></a></li>
<li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/d24018d8012d202912313b012911.jpg"alt=""></a></li>
</ul></div></section>