时间戳

首页 > 解决方案 > 用悬停显示文本

html - 用悬停显示文本

问题描述

当我将鼠标悬停在图像上时，我想显示一些文本。实际上我已经完成了这项工作，但是文本正在增加卡片的大小，这就是为什么我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>

标签： htmlcssbootstrap-4

解决方案

代替

.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;
}

推荐阅读