I wanted to make a% infinite% co containing news, so I want each image to show a text that in turn is a link to the news to read it in depth.
Here is an example: News page with similar slider
The thing is to make an infinite slider of images, but I do not know how to add the link.
For now I have this.
My HTML:
<div class="Banner_Noticias">
<a href="clasificacion.html" id="Enlace1" target="_blank">Enlace noticia</a>
</div>
My CSS:
.Banner_Noticias{
height: 433px;
width: 650px;
border: solid 15px;
border-color: #FFF;
border-radius: 20px;
margin-left: 40px;
background-size: 100% 100%; /* Redimensionar imagen :) */
/* Animacion */
animation: Animacion_Banner_Noticias 10s infinite;
}
@keyframes Animacion_Banner_Noticias{
0%, 30%{
background-image: url(../Img/Imagen1.jpg);
opacity: 1;
}
31%, 34%{
opacity: 0.7;
}
35%, 65% {
background-image: url(../Img/Imagen2.jpg);
opacity: 1%;
}
66%, 69%{
opacity: 0.7%;
}
70%, 100% {
background-image: url(../Img/Imagen3.jpg);
opacity: 1%;
}
}
The problem is that this way, all the images contain the same link and obviously this must change according to the image.
I think maybe it should be done for slider , but the truth is that nothing gives the desired result. Is there any property CSS that allows you to enter links? That is, I with CSS I put the image, is there something for links? If not, how would it be done?
Thanks