How can I make a divbox fade in over a carousel?

Question

At the moment I have a carousel with 3 images that stop on hover and get a black outline. My Problem is, that I would like to get a divbox to fade in instead of the outline. Is the even possible or are there any workaround I can do to get to my goal?

My HTML

<!--anfang Slider mit 3 bildern-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Die Punkte zur navigation -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!--Die einzelenen Bilder-->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
        <img class="carousel-img" src="img/bild1.png" alt="Bild1">
        </div>

        <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild2">
        </div>

        <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild3">
        </div>
        </div>
    </div>
    <!--ende Slider mit 3 bildern-->
    <!--Hover div-->
        <div class="carousel-text">
        </div>
    <!--ende Hover div-->

My CSS

.carousel-img:hover {
  margin-top: 1%;
  margin-left: 1%;
  border: 10px solid black;
  margin: 0 auto;
  width: 100%;
  z-index: -999;
}

.carousel-text {
  background-color: rgb(196 / 23 / 19);
  margin-top: 1%;
  margin-left: 1%;
  opacity: 1;
  height: 75%;
  width: 33%;
  z-index: 998;
  visibility: visible;
}

All of my CSS classes already have the standard Bootstrap.css

Answer 1

Just use the next selector:

HTML

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img class="carousel-img" src="img/bild1.png" alt="Bild1">
        <div class="carousel-caption"></div>/* your fade-in div */
    <div

    <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild2">
        <div class="carousel-caption"></div>/* your fade-in div */
    </div>

    <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild3">
        <div class="carousel-caption"></div>/* your fade-in div */
    </div>
</div>

CSS

.carousel-img:hover {
  margin-top: 1%;
  margin-left: 1%;
  /*border: 10px solid black;*/
  margin: 0 auto;
  width: 100%;
  z-index: -999;
}
.carousel-caption {
    transition: opacity 1s;
    opacity: 0;
}
/* targets any .carousel-caption after hovered images */
.carousel-img:hover + .carousel-caption {
    opacity: 1;
}

Then you just style the .carousel-caption however you like.