Crop the image reflection using other div, or any other method - html

Question

OK, so I have this image slider that slides images at the left side of the page. They keep scrolling from bottom to top. But I wanted the images to have a reflection as well using CSS. So I wrote another div consisting of same images in reverse direction and less opacity so it looks like reflection but the complete image is reflecting which ruins the appearance of the whole thing. so I wrote another div below each reflection which would mask the image reflection to a certain extent and gave it higher z-index as compared to image reflection but anyways this doesn't seem to work. No matter what I try the image reflection comes above the added div. So is there a way the reflection image could be cropped without disturbing the scale of the image or so that the added div "overlay" in my case comes above the reflection? And also the main div that consists of all the images in my case "imagesRow" I want to give it some styling so that it looks like a glass. But whatever style I give to that div it automatically gets applied to child components. So is there a way I can change the main div's(imagesRow) style without affecting the images inside it? This link might be of any help I hope. http://jsfiddle.net/659Na/
Html code:
<div id="imagesRow" style="position: absolute;top:5px;">
<marquee behavior="scroll" direction="up" onmouseover="this.stop();" onmouseout="this.start();" height="725" >
<div id="l1" class="father">
<img class="messagesOne" src="images/images.png">
<div class="reflection">
<img src="images/images.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l2" class="father">
<img class="messagesOne" src="images/image3.png">
<div class="reflection">
<img src="images/image3.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l3" class="father">
<img class="messagesOne" src="images/image5.png">
<div class="reflection">
<img src="images/image5.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l4" class="father">
<img class="messagesOne" src="images/image7.png">
<div class="reflection">
<img src="images/image7.png" />
<div class="overlay"></div>
</div>
</div>
</br>
</br>
<div id="l5" class="father">
<img class="messagesOne" src="images/image9.png">
<div class="reflection">
<img src="images/image9.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l6" class="father">
<img class="messagesOne" src="images/image11.png">
<div class="reflection">
<img src="images/image11.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l7" class="father">
<img class="messagesOne" src="images/image12.png">
<div class="reflection">
<img src="images/image12.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l8" class="father">
<img class="messagesOne" src="images/image14.png">
<div class="reflection">
<img src="images/image14.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l9" class="father">
<img class="messagesOne" src="images/image15.png">
<div class="reflection">
<img src="images/image15.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l10" class="father">
<img class="messagesOne" src="images/image16.png">
<div class="reflection">
<img src="images/image16.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l11" class="father">
<img class="messagesOne" src="images/image17.png">
<div class="reflection">
<img src="images/image17.png" />
<div class="overlay"></div>
</div>
</div>
</marquee>
</div>
css file:
.messagesOne{
height: 60px;
width: auto;
margin-left: 56px;
}
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; opacity:0.20;
filter: alpha(opacity='20');
height: 60px;
width: auto;
margin-left: 56px;
z-index: -1100;
}
.overlay {
margin-top: -44px;z-index: 1000; width:auto; height:60px;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}

Answer 1

I think you can get the effect by simplifying your code. The overlay isn't necessary.
Style the .reflection something like this:
.reflection {height:20px; overflow:hidden; margin:-10px 0 10px 0;}
See this example at jsfiddle