ट्रांसफ़ॉर्म और स्केल ओवरफ्लो की गई छवियों को छुपाता नहीं है

मेरे पास छवियों के साथ पंक्तियों की एक सूची है। ये छवियां छोटी छवियों के रूप में दिखाई दे रही हैं। लेकिन अगर आप उन्हें घुमाते हैं तो वे स्केल हो जाते हैं। स्केलिंग करते समय छोटी छवियों को ओवरलैप किया जाता है। होवर की गई छवि के नीचे की छोटी छवि छिपी नहीं है जबकि इसके ऊपर की छोटी छवि छिपी हुई है।

मुझे यकीन नहीं है कि मैं कहाँ त्रुटि कर रहा हूँ। स्केलिंग के लिए मैं जिस वर्ग का उपयोग कर रहा हूं वह है,

        transition: all 0.6s;
        -ms-transform: scale(6.5, 6.5);
        -webkit-transform: scale(6.5, 6.5);
        transform: scale(6.5, 6.5);
        overflow: hidden;
        height: 100%;
        width: 100%;
        z-index: 2000 !important;
        border: 1px solid #e5e5e5;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
An example of how it is behaving is at,

https://jsfiddle.net/adnanj/1Lruex8f/