Question

我想在悬停图像时显示文本：此文本可以大于图像。就是这样：

How I need

如您所见，这是一个轮播。有些图像会带有较大的文字，而另一些则不会。因此，我的代码必须在两种情况下都可以工作。也许我应该再增加一个班级？

这就是我得到的：

.card-carousel-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 20px 0 40px;
  color: #666a73;
}

.card-carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 500px;
}

.card-carousel--overflow-container {
  overflow: hidden;
}

.card-carousel--nav__left,
.card-carousel--nav__right {
  display: inline-block;
  width: 15px;
  height: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-top: 6px solid #313332;
  border-right: 6px solid #313332;
  cursor: pointer;
  margin: 0 50px;
  -webkit-transition: -webkit-transform 150ms linear;
  transition: -webkit-transform 150ms linear;
  transition: transform 150ms linear;
  transition: transform 150ms linear, -webkit-transform 150ms linear;
}

.card-carousel--nav__left[disabled],
.card-carousel--nav__right[disabled] {
  opacity: 0.2;
  border-color: black;
}

.card-carousel--nav__left {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.card-carousel--nav__left:active {
  -webkit-transform: rotate(-135deg) scale(0.9);
          transform: rotate(-135deg) scale(0.9);
}

.card-carousel--nav__right {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.card-carousel--nav__right:active {
  -webkit-transform: rotate(45deg) scale(0.9);
          transform: rotate(45deg) scale(0.9);
}

.card-carousel-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 150ms ease-out;
  transition: -webkit-transform 150ms ease-out;
  transition: transform 150ms ease-out;
  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
  -webkit-transform: translatex(0px);
          transform: translatex(0px);
}

.card-carousel-cards .card-carousel--card {
  width: 266px;
  margin: 0 15px;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
          box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
  background-color: #fff;
  border-radius: 4px;
  z-index: 3;
  margin-bottom: 2px;
}

.card-carousel-cards .card-carousel--card:first-child {
  margin-left: 0;
}

.card-carousel-cards .card-carousel--card:last-child {
  margin-right: 0;
}

.card-carousel-cards .card-carousel--card img {
  vertical-align: bottom;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-transition: opacity 150ms linear;
  transition: opacity 150ms linear;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.card-carousel-cards .card-carousel--card img:hover {
  opacity: 0.5;
}

.card-carousel-cards .card-carousel--card--footer {
  border-top: 0;
  padding: 7px 15px;
}

.card-carousel-cards .card-carousel--card--footer p {
  padding: 3px 0;
  margin: 0;
  margin-bottom: 2px;
  font-size: 19px;
  font-weight: 500;
  color: #2c3e50;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) {
  font-size: 12px;
  font-weight: 300;
  padding: 6px;
  background: rgba(40, 44, 53, 0.06);
  display: inline-block;
  position: relative;
  margin-left: 4px;
  color: #666a73;
}

.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2):before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: transparent rgba(40, 44, 53, 0.06) transparent transparent;
  border-style: solid;
  border-width: 12px 12px 12px 0;
}

.card-carousel-cards .card-carousel--card--footer p:nth-of-type(2):after {
  content: "";
  position: absolute;
  top: 10px;
  left: -1px;
  float: left;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: white;
  -webkit-box-shadow: -0px -0px 0px #004977;
          box-shadow: -0px -0px 0px #004977;
}

.servicos-carousel {
  margin-top: 60px;
}

.card-carousel-layer {
  text-align: center;
  position: fixed;
  width: 266px;
  top: 0;
  bottom: 0;
}

.card-carousel-text {
  visibility: hidden;
  height: 0px;
  -webkit-transition: min-height 0.5s, color 0.7s;
  transition: min-height 0.5s, color 0.7s;
  background-color: rgba(234, 121, 3, 0.7);
  color: transparent;
  font-family: 'Myriad Pro';
  font-size: 12px;
  text-align: justify;
  padding: 0px 10px;
}

.card-carousel-text-text {
  line-height: 1.4;
  display: block;
}

.card-carousel-title {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 266px;
  background-color: #ea7903;
  opacity: 0.8;
  color: #fff;
  font-family: 'Calibri Bold';
  font-size: 14px;
}

.card-carousel--card:hover .card-carousel-title {
  visibility: hidden;
}

.card-carousel--card:hover .card-carousel-text {
  min-height: 164px;
  visibility: visible;
  color: #fff;
}

.card-carousel--card:hover .card-carousel-text-title {
  border-bottom: 2px solid #fff;
}

.card-carousel-text-title {
  text-align: center;
  width: 100%;
  display: block;
  font-family: 'Calibri Bold';
  border-bottom: 2px solid transparent;
  font-size: 20px;
  -webkit-transition: border-bottom 0.7s;
  transition: border-bottom 0.7s;
}

<div class="servicos-carousel">
    <div class="card-carousel-wrapper">
        <div class="card-carousel--nav__left"></div>
        <div class="card-carousel">
            <div class="card-carousel--overflow-container">
                <div class="card-carousel-cards">
                    <div class="card-carousel--card">
                        <img src="https://via.placeholder.com/266x164"> 
                        <div class="card-carousel-layer">
                            <div class="card-carousel-title">Fiscalização/Supervisão Motorizada 24h</div>
                            <div class="card-carousel-text"><span class="card-carousel-text-title">Fiscalização/Supervisão Motorizada 24h</span> <span class="card-carousel-text-text">Os supervisores são os principais responsáveis pela boa e eficiente execução das tarefas diárias de vigilância, segurança e proteção de vidas. Realiza inspeção e controle que assegura a compreensão de normas, ordens e instruções devidamente orientadas.</span></div>
                        </div>
                    </div>
                    <div class="card-carousel--card">
                        <img src="https://via.placeholder.com/266x164"> 
                        <div class="card-carousel-layer">
                            <div class="card-carousel-title">Botão de Pânico</div>
                            <div class="card-carousel-text">
                                <span class="card-carousel-text-title">Botão de Pânico</span> 
                                <span class="card-carousel-text-text">
                                    Além de ser um dispositivo de controle, também é um meio de aumentar a segurança dos funcionários, graças à função PANIC, por exemplo: seguranças trabalhando sozinhos.<br>
                                    <ul>
                                        <li>Botão de Pânico integrado ao Bastão</li>
                                        <li>Bastão resistente a água</li>
                                        <li>Bastão com sensor anti-vandalismo (anti-shock)</li>
                                        <li>Comunicação Bi-direcional de Voz</li>
                                        <li>Localização perimetral (Antenas via GSM/GPRS)</li>
                                        <li>Leitura RFID (Tags)</li>
                                        <li>Sensor de ociosidade de vigilância</li>
                                        <li>Baixo custo de implantação</li>
                                        <li>Controle de Ronda, ocorrências e eventos em tempo real</li>
                                        <li>Alerta ao vigilante de início da Ronda</li>
                                    </ul>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-carousel--nav__right"></div>
    </div>
</div>

Answer 1

当您将鼠标悬停在卡片上时，请删除类card-carousel--overflow-container中隐藏的溢出内容，并删除文本的高度。

.card-carousel--card:hover .card-carousel-text {
    height: auto;
}

http://jsfiddle.net/1uyqc0b9

将鼠标悬停在图像上时显示大文本

1 个答案: