ссылки в CSS слайд-шоу

Question

Я хотел бы иметь изображения в моем слайд-шоу, чтобы быть интерактивными ссылки, а просто положить теги вокруг него не работает:

<a href="#"><img class='photo' src="Images/Red.jpeg" alt=""></a> 

Это, вероятно, имеет что-то делать с анимацией, Есть ли способ обойти это?

Css:

#slideshow { 
    margin:50px auto; 
    width:60em; 
    height:18em; 
    overflow:hidden; 
    border:0.4em solid; 
    border-color: black; 
    position:relative; 
} 
.photo{ 
    position:absolute; 
    animation:round 16s infinite; 
    -webkit-animation: round 16s infinite; 
    opacity:0; 
} 
@keyframes round{ 
    25%{opacity:1;} 
    40%{opacity:0;} 
} 
@-webkit-keyframes round { 
    25%{opacity:1;} 
    40%{opacity:0;} 
} 

img:nth-child(4){animation-delay:0s;} 
img:nth-child(3){animation-delay:4s;} 
img:nth-child(2){animation-delay:8s;} 
img:nth-child(1){animation-delay:12s;} 
img:nth-child(4){-webkit-animation-delay:0s;} 
img:nth-child(3){-webkit-animation-delay:4s;} 
img:nth-child(2){-webkit-animation-delay:8s;} 
img:nth-child(1){-webkit-animation-delay:12s;} 

HTML:

<div id="slideshow"> 
    <img class='photo' src="Images/Red.jpeg" alt=""> 
    <img class='photo' src="Images/rose.jpeg" alt=""> 
    <img class='photo' src="Images/White.jpeg" alt=""> 
    <img class='photo' src="Images/rose.jpeg" alt="">  
</div> 

Answer 1

Wrap изображений с и добавить класс фото до ссылки. Удалите фотографию класса из изображений. Попробуйте сделать это :)

Answer 2

Try:

Wrap все изображения в <a> тегов, каждый из которых один с классом "photolink" или любое имя, которое вы хотите.

#slideshow a.photolink { display: block; } 

Попробуйте изменить «положение: абсолютное» в. фото "позиция: относительная".