Показать текст при наведении

Question

Я хотел бы показать некоторый текст, когда я наведу курсор мыши на изображение.На самом деле я уже заставил это работать, но текст увеличивался по размеру карты, поэтому я добавил display none к текстовому классу.

Я не могу поместить весь код здесь, позвольте мнедать вам отрывок из jsfiddle, это будет проще: https://jsfiddle.net/Minirock/fgs7o2Lv/1/ Текст, который я хотел бы показать, находится под FORUM 1 и FORUM 2 в образце скрипки.

Пожалуйста, дайте мне знать, если вам нужнобольше объяснений о том, что не так.Код единицы измерения HTML находится ниже.

<div class="card-body">
    <div class="forum_title">FORUM 1</div>
    <div class="row">
        <div class="col-lg-8 category">
            <div class="card card-chart image1">
                <img src="http://lorempixel.com/500/150/nature/" alt="avatar_monde" class="img_monde" />
                    <div class="middle">
                        <div class="text">Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum.</div>
                    </div>
            </div>
        </div>

        <div class="col-lg-2 category">
            <div class="card card-chart detail">
                NOM SUJET
                <br/>
                NOM POSTEUR
                <br/>
                HEURE
                <br/>
                <a href="#"> > LIRE LE DERNIER MESSAGE</a>
            </div>
        </div>
    </div>
</div>

Answer 1

заменить

.text{
    display: none;
}

на это (и должно работать без проблем)

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

Answer 2

Попробуйте установить свой стиль на середине тега деления

Answer 3

вы можете использовать jQuery для этого, просто используя событие onmouseover

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.img_monde').mouseover(function(){
   $('.text').css('display', 'inline');
})
</script>

Это проверяет событие наведения мыши на изображение с классом "img_monde" и устанавливает отображение div с классом "text" для встроенного отображения при возникновении события.

Answer 4

Раньше я сталкивался с такой проблемой раньше. Это легко исправить. Пока не делаем

.text{
    display:none;
}

.image1:hover .middle,
.image2:hover .middle,
.image3:hover .middle ,
.image4:hover .middle ,
.image5:hover .middle ,
.image6:hover .middle ,
.image7:hover .middle ,
.image8:hover .middle ,
.image9:hover .middle ,
.image10:hover .middle ,
.image11:hover .middle ,
.image12:hover .middle ,
.image13:hover .middle ,
.image14:hover .middle ,
.image15:hover .middle 
{
     opacity: 1;
     display:block;
}

Обратите внимание, что текстовый класс должен быть в том же div, что и изображения.