CSS - Problemas con position:relative y absolute y bootstrap

Buenas, tengo un código que no me funciona correctamente y no sé por qué. Quiero mostrar dos filas de 6 fotos cada una, utilizando bootstrap para que sea responsive, y que al pasar el ratón por cada foto se muestre la de hover. El problema es que la segunda fila se superpone en la posición de la primera y solo se ven 6 fotos. ¿Alguien podría ayudarme?

El html está así:

<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/1_compresores_web.jpg" alt="1_compresores_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/1_compresores_web_hover.jpg" alt="1_compresores_hover" width="150" height="100" /></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/2_proteccionlaboral_web.jpg" alt="2_proteccionlaboral_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/2_proteccionlaboral_hover.jpg" alt="1_compresores_hover" width="150" height="100" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/3_soldadura.jpg" alt="3_soldadura.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/3_soldadura_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/4_herramientas_web.jpg" alt="4_herramientas_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/4_herramientas_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/5_ventilacion.jpg" alt="5_ventilacion.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/5_ventilacion_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/6_maquinaria_web.jpg" alt="6_maquinaria_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/6_maquinaria_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>


<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/1_compresores_web.jpg" alt="1_compresores_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/1_compresores_web_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/2_proteccionlaboral_web.jpg" alt="2_proteccionlaboral_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/2_proteccionlaboral_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/3_soldadura.jpg" alt="3_soldadura.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/3_soldadura_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/4_herramientas_web.jpg" alt="4_herramientas_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/4_herramientas_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/5_ventilacion.jpg" alt="5_ventilacion.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/5_ventilacion_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<div class="cat_primary_dlm"><center><img src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/6_maquinaria_web.jpg" alt="6_maquinaria_web.jpg" /> <img class="top" src="http://tiendaintec.es/img/cms/Categor%C3%ADas%20Miniaturas/HOVER/6_maquinaria_hover.jpg" alt="1_compresores_hover" /></center></div>
</div>

Y el CSS así:

.cat_primary_dlm {
position: relative;
float: left;
width="150";
height="100";
}

.cat_primary_dlm img {

position: absolute;
left: 0;
transition: opacity 0.7s ease-in-out;
border-radius: 8px;
}

.cat_primary_dlm img.top:hover {
opacity: 0;
}


MUCHAS GRACIAS!