Slide.css

.container {

   margin: auto;
   background-color: white;
   width: 800px;
   padding: 30px;

}

ul, li {

   padding: 0;
   margin: 0;
   list-style: none;

}

ul.slider {

   position: relative;
   width: 300px;
   height: 300px;

}

ul.slider li {

   position: absolute;
   left: 0px;
   top: 0px;
   opacity: 0;
   width: inherit;
   height: inherit;
   transition: opacity .5s;
   background: #fff;

}

ul.slider li img {

   width: 100%;
   height: 300px;
   object-fit: cover;

}

ul.slider li:first-child {

   opacity: 1;

/*Mostramos el primer

*/ } ul.slider li:target { opacity: 1; /*Mostramos el

del enlace que pulsemos*/ } .menu { text-align: center; margin: 20px; } .menu li { display: inline-block; text-align: center; } .menu li a { display: inline-block; color: white; text-decoration: none; background-color: grey; padding: 10px; width: 20px; height: 20px; font-size: 20px; border-radius: 100%; }