div.siglicm {
 background: red;height: 400px;border: 12px solid #777;
}

div.siglicm:hover {
  border: 12px solid red;background: #FFA500;
}

div.siglicm img {
  width: 45%;
  height: auto; 
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.siglic {
  padding: 0 6px;
  float: left;
  width: 20%;
}

@media only screen and (max-width: 700px) {
  .siglic {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .siglic {
    width: 100%;
  }
}





.imagen-zoom {
  width: 250px; 
  transition: transform 2.3s ease; 
}

.imagen-zoom:hover {
  transform: scale(3.2); 
}
.banner {
  width: 300px;
  height: 200px;
  margin: auto;
  background-size: 50% 50%;
  animation: banner 10s infinite;
  animation-direction: alternate;
}

@keyframes banner {
  0%, 30% {
    background-image: url(img3/1.jpg);
    opacity: 11;
  }
  31%,
  34% {
    opacity: 0.9;
  }
  35%,
  65% {
    background-image: url(img3/2.jpg);
    opacity: 1;
  }
  66%,
  69% {
    opacity: 0.1;
  }
  70%,
  100% {
    opacity: 1;
    background-image: url(img3/3.jpg);
  opacity: 1;
  }
  66%,
  69% {
    opacity: 0.1;
  }
  70%,
  100% {
    opacity: 1;
     background-image: url(img3/4.jpg);
  opacity: 1;
  }
  66%,
  69% {
    opacity: 0.1;
  }
  70%,
  100% {
    opacity: 1;

background-image: url(img3/5.jpg);
  opacity: 1;
  }
  66%,
  69% {
    opacity: 0.1;
  }
  70%,
  100% {
    opacity: 1;
 }