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

Question

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

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

这是我得到的：

https://jsfiddle.net/fqu6jgrv/

 .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