Carousel Slide: İnsert Text and Link Adding for CSS and HTML - html

Question

I'm new to HTML and CSS. I just made a carousel slide using HTML and CSS. And I want to insert text in the corners of this slide. I couldn't do that because whatever I tried didn't work. I'm also trying to redirect to a different page when clicking on this slide.
I'am sorry my English btw. I hope I could explain what I mean.
CSS and HTML of my slide:
.tech-slideshow {
height: 190px;
max-width: 2600px;
margin: 0;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 200px;
width: 2526px;
background: url(https://resmim.net/cdn/2022/10/22/OybOx.jpg);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 40s linear infinite;
}
#keyframes moveSlideshow {
50% {
transform: translateX(-40%);
}
}
<div class="tech-slideshow">
<div class="mover-1"></div>
</div>

Answer 1

Here's a possible solution with absolute positioning:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tech-slideshow {
height: 190px;
max-width: 2600px;
position: relative;
overflow: hidden;
}
.tech-slideshow__link {
display: block;
width: 100%;
height: 100%;
}
.mover-1 {
width: 2526px;
background: url(https://resmim.net/cdn/2022/10/22/OybOx.jpg);
height: 100%;
animation: moveSlideshow 40s linear infinite;
}
.mover-1-text {
position: absolute;
padding: 0.5em 2em;
color: #fff;
background-color: #000;
font-size: 1.5rem;
}
.mover-1-text1 {
left: 10px;
top: 10px;
}
.mover-1-text2 {
left: 10px;
bottom: 10px;
}
.mover-1-text3 {
right: 10px;
bottom: 10px;
}
#keyframes moveSlideshow {
50% {
transform: translateX(-40%);
}
}
<div class="tech-slideshow">
<a href="#" class="tech-slideshow__link" target="_blank">
<div class="mover-1"></div>
<p class="mover-1-text mover-1-text1">Text</p>
<p class="mover-1-text mover-1-text2">Text</p>
<p class="mover-1-text mover-1-text3">Text</p>
</a>
</div>