<div class="Uk-container uk-padding escudo">
<img src="templates/puebla/images/footer/Escudo_pie.svg" />
</div>



 <!-- <a href="#" class="">-->
    <div class="image-hover">
      <img src="templates/puebla/images/footer/icon_911.svg" class="image-1">
      <img src="templates/puebla/images/footer/icon_911_hover.svg" class="image-2">
      </div>
 <!-- </a>-->

<style>
.escudo img{
  width:360px;
  height:auto;
}
  
.image-hover {
    display: block;
    position: relative;
    width: auto; 
    height: 80px;
  overflow:hidden;
}

.image-hover:hover {
  /*  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);*/
}

.image-hover img {
    display: block;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0;
    left: 0;
    transition: opacity 0.3s ease; 
 /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow:hidden;*/
}

.image-hover .image-1 {
    opacity: 1; 
}

.image-hover .image-2 {
    opacity: 0;
}

.image-hover:hover .image-1 {
    opacity: 0; 
}

.image-hover:hover .image-2 {
    opacity: 1;
}

</style>
  