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

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 >
  <div ></div>
</div>

CodePudding user response：

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 >
  <a href="#"  target="_blank">      
     <div ></div>
     <p >Text</p>
     <p >Text</p>
     <p >Text</p>
  </a>
</div>