I'd like to have a scrolling marquee of images, that when you hover over an individual image there is a link to "shop now". I have the marquee and the links appear on hover, but right now they appear all on top of each other rather than on top of their designated product image. I'm self-taught with code, so what I have may be incorrect - appreciate constructive criticism! Thanks in advance!
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow-X: hidden
}
#slider {
width: 800px;
margin: 20px auto;
overflow: hidden
}
#slider .images {
width: 1835px;
display: inline-block;
animation: marquee 35s linear infinite;
}
@keyframes marquee {
0% {
margin-left: 0;
}
100% {
margin-left: calc(-1835px + 608px);
}
}
#slider .image {
padding: 5px;
}
#slider .image:hover {
border: 1px solid;
border-color: #000;
}
#slider .images:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.title {
position: absolute;
width: 300px;
left: 0;
top: 200px;
text-align: center;
opacity: 0;
transition: opacity .35s ease;
font-family: darker grotesque;
letter-spacing: .2em;
}
.title {
padding: 12px 20px;
text-align: center;
color: #fff;
background-color: none;
text-decoration: none;
z-index: 1;
}
#slider:hover .title {
opacity: 1;
}<div id="slider">
<div class="images">
<img class="image" src="https://images.pexels.com/photos/8128069/pexels-photo-8128069.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="250" height="400" />
<p class="title"><a href="#">PRODUCT ONE</a></p>
<img class="image" src="https://images.pexels.com/photos/8490222/pexels-photo-8490222.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="250" height="400" />
<p class="title"><a href="#">PRODUCT TWO</a></p>
<img class="image" src="https://images.pexels.com/photos/12035708/pexels-photo-12035708.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="250" height="400" />
<p class="title"><a href="#">PRODUCT THREE</a></p>
<img class="image" src="https://images.pexels.com/photos/7795689/pexels-photo-7795689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="250" height="400" />
<p class="title"><a href="#">PRODUCT FOUR</a></p>
<img class="image" src="https://images.pexels.com/photos/8490114/pexels-photo-8490114.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="250" height="400" />
<p class="title"><a href="#">PRODUCT FIVE</a></p>
</div>
</div>