Dart CSS3 Transitions white glow not wanted

[svetaasexy]

So I started to learn just yet so I am a beginner. What I want to achieve is changing divs with different backgrounds like here . In the tutorial is accomplished with but I want to do it with background properity because I dont want my images to be draggable.What happens is that instead of each image flowing to each other and changing colors, I get some white glow that happens. Any help?Here is Html\[code\]<p id="transitionControls"> <span>Snap1</span> <span>Snap2</span> <span>Snap3</span> <span>Snap4</span> <span>Snap5</span> <span>Snap6</span> <span>Snap7</span></p> <div id="imageContainer" class='opaque'> <div id="Snap7" class="snap"></div> <div id="Snap6" class="snap"></div> <div id="Snap5" class="snap"></div> <div id="Snap4" class="snap"></div> <div id="Snap3" class="snap"></div> <div id="Snap2" class="snap"></div> <div id="Snap1" class="snap"></div> </div>\[/code\]Here is CSS:\[code\]div{ position:absolute; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; background-size: 100% 100%; margin:auto; transition: opacity 1s ease-in-out; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);}div.snap { opacity:0;}div.opaque{ opacity:1; -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); } \[/code\]Where each Snap has simple CSS\[code\]#Snap1 {background: url('img/Snap_1.jpg') no-repeat;width: 1680px;height: 1350px;}\[/code\]Here is dart script\[code\]import 'dart:html';DivElement div;var counter = 0;void main() { query("#transitionControls") ..onClick.listen(changeDiv);}//void changeDiv(MouseEvent event) { SpanElement snap = event.target; var text = snap.text; div = query(".opaque"); query("#$text").classes.add("opaque"); div.classes.remove("opaque"); }\[/code\]