Make a div visible on image hover in owl carousel

Question

I have owlcarousel like this in mvc

 <div class="owl-carousel owl-theme">
            @if (Model?.CarrouselImages.Count > 0)
            {
                @foreach (var item in Model.CarrouselImages)
                {
                    <div class="item">
                        <div><img src="~/@item.Src" class="hover-img"  data-id="@item.Id"></div> 
                       <div id="info@{@item.Id}" style="display:none">@item.Name</div>
                    </div>
                }
            }
        </div>

I want on hover of each image carousel , the related div "info@{@item.Id}" for its description be visible

I did this on jQuery

   $(".hover-img").hover(function(){    
     var id = $(this).data("id");   
     var infoId="#info"+id;   
   $(infoId).css('display','block');
     },function(){
       var id = $(this).data("id");
       var infoId="#info"+id;
       $(infoId).css('display','none');
   })

But it just shows the first image description on its hover, the rest nothing happens. where could be possibly wrong?

Answer 1

It seems you have an issue on id of each image. But it works in my demo, probably your ids not match or etc.

$(".hover-img").hover(function() {
  var id = $(this).data("id");
  var infoId = "#info" + id;
  $(infoId).css('display', 'block');
}, function() {
  var id = $(this).data("id");
  var infoId = "#info" + id;
  $(infoId).css('display', 'none');
})

.overlay {
  position: absolute;
  top: 0;
  background: red;
}

.item {
    position: relative;
}

.owl-carousel {
  display: flex
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="owl-carousel owl-theme">

  <div class="item">
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s" class="hover-img" data-id="1"/></div>
    <div id="info1" class="overlay" style="display:none">Text 1</div>
  </div>

  <div class="item">
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s" class="hover-img" data-id="2"/></div>
    <div id="info2" class="overlay" style="display:none">Text 2</div>
  </div>
</div>

But good news is, you don't need jQuery! you can done this only with pure css try:

.overlay {
  position: absolute;
  top: 0;
  background: red;
  display: none;
}

.item:hover .overlay {
  display: block;
}

/* DO NOT USE BELOW IN YOUR REAL CODE */

.item {
    position: relative;
}

.owl-carousel {
  display: flex
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="owl-carousel owl-theme">

  <div class="item">
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s" class="hover-img"/></div>
    <div class="overlay">Text 1</div>
  </div>

  <div class="item">
    <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcS1Lg205RV2hcJ2KzdqZ91E-D-9na2a-DyS8MuGKg&s" class="hover-img"/></div>
    <div class="overlay">Text 2</div>
  </div>
</div>