I’m very new to all this. I’m trying to make my image into a link using the anchor tag but doing so seems to ignore the previous style I had for the image and I’m not sure why.
So my CSS looks like this:
/* Element */
*, *::after, *::before{
box-sizing: border-box;
}
/* Variable */
:root{
--handle-size: 3rem;
--img-gap: .25rem;
}
.body{
margin: 0;
}
.container{
display: flex;
justify-content: center;
overflow: hidden;
}
.slider{
--items-per-screen: 4;
--slider-index: 0;
display: flex;
flex-grow: 1;
margin: 0 var(--img-gap);
transform: translateX(calc(var(--slider-index) * -100%));
transition: transform 500ms ease-in-out;
}
.slider > img {
flex: 0 0 calc(100% / var(--items-per-screen));
max-width: calc(100% / var(--items-per-screen));
aspect-ratio: 16 / 9;
padding: var(--img-gap);
border-radius: 1rem;
}
and my images are inside of a div which without the anchor displays correctly:
<div class = "slider">
<img src="Icons/schitts.jpg" stlye="container" alt = "Schitts Creek">
<img src="Icons/familyguy.jpg" alt = "Family Guy">
<img src="Icons/gameofthrones.jpg" alt = "Game Of Thrones">
<img src="Icons/sopranos.jpg" alt = "The Sopranos">
<img src="Icons/southpark.jpg" alt = "South Park">
<img src="Icons/prisonbreak.jpg" alt = "Prison Break">
<img src="Icons/curbyourenthusiasm.jpg" alt = "Curb Your Enthusiasm">
<img src="Icons/americandad.jpg" alt = "American Dad">
<img src="Icons/sinister.jpg" alt = "Sinister">
<img src="Icons/superbad.jpg" alt = "Superbad">
<img src="Icons/hangover.jpg" alt = "The Hangover">
<img src="Icons/midsommar.jpg" alt = "Midsommar">
</div>
When I add the anchor tag between an image, it ignores the previous styles I had while the other images without the anchor tag remain in the correct style.
How do I keep the layout of everything the same while allowing the image to contain a link?