我正在使用 Bootstrap 3，当一个人将鼠标悬停在图片上时，paragraf文本中淡出以下内容。
如果标题和子行在那里，它看起来不会很好，因此我希望当一个人将鼠标悬停在图像上时，标题和子标题会淡出，所以它只显示paragraf文本。
我不太确定如何做到这一点，或者如何开始。有人可以给我一些建议吗？
可以在此处查看现场演示。
body {
background-color: #f5f5f5;
}
.mk.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.mk.row {
margin-left: -5px;
margin-right: -5px;
background-color: #fff
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
/* Hover for grid elements that contains text */
.hovereffect {
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect p.info {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top:5%; /* (100% - 85%)/2 */
left:5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
}
.hovereffect:hover p.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="mk row">
<div class="col-sm-6">
<a href="#">
<div class="hovereffect">
<img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive"></img>
<div class="overlay">
<a href="#">
<p class="info">
Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante. Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula volutpat ac nullam<br/><br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget morbi, vel
</p>
</a>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">This headline need to fade out</h3>
<span class="light-font">This subheadline should fade out when hover</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>这很容易
我对css部分进行了细微的更改
就像您为<div class='overlay' ../>规则添加了.hovereffect:hover .overlay一样
添加.inner-wrapper.bottom-left h3选择器:hover
body {
background-color: #f5f5f5;
}
.mk.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.mk.row {
margin-left: -5px;
margin-right: -5px;
background-color: #fff
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
/* Hover for grid elements that contains text */
.hovereffect {
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect p.info {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top:5%; /* (100% - 85%)/2 */
left:5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
}
.hovereffect:hover p.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
.hovereffect:hover .inner-wrapper.bottom-left h3,.hovereffect:hover .inner-wrapper.bottom-left span{
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .inner-wrapper.bottom-left h3,.hovereffect:hover .inner-wrapper.bottom-left span{
opacity:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="mk row">
<div class="col-sm-6">
<a href="#">
<div class="hovereffect">
<img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive"></img>
<div class="overlay">
<a href="#">
<p class="info">
Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante. Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula volutpat ac nullam<br/><br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget morbi, vel
</p>
</a>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">This headline need to fade out</h3>
<span class="light-font">This subheadline should fade out when hover</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>将transition: all 0.4s ease-in-out;设置为类h3 and subheading并将opacity:0设置为悬停，通过这样做，当您从图像中删除鼠标时，您将获得相同的效果。 请检查下面的工作片段，希望对:)有所帮助
body {
background-color: #f5f5f5;
}
.mk.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.mk.row {
margin-left: -5px;
margin-right: -5px;
background-color: #fff
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
/* Hover for grid elements that contains text */
.hovereffect {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170, 170, 170, 0.4);
}
.hovereffect h2,
.hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect p.info {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top: 5%;
/* (100% - 85%)/2 */
left: 5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
}
.hovereffect:hover p.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0, 0, 0, 0.4);
}
.inner-wrapper.bottom-left h3,
.inner-wrapper.bottom-left span {
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
opacity: 0;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="mk row">
<div class="col-sm-6">
<a href="#">
<div class="hovereffect">
<img src="https://drwyjmricaxm7.cloudfront.net/repository/TigerTrailItinerary1RegionalToursIndia-58141245765254_crop_610_410.jpg" alt="Accesories" class="img-responsive" />
<div class="overlay">
<a href="#">
<p class="info">
Lorem ipsum dolor sit amet, consectetuer vel interdum tempus egestas sed, eros ea ullamcorper tellus ut vestibulum ante.
Id posuere sem est arcu, dapibus est. Neque ornare magna nunc volutpat blandit lorem, lacus sagittis ligula
volutpat ac nullam
<br/>
<br/> Vulputate luctus ipsum velit eget amet aliquam. Ac nibh dictum fermentum sodales, tincidunt metus placerat
erat. In donec vitae luctus lorem repudiandae fames, explicabo donec in a non molestie. Montes ac quis eget
morbi, vel
</p>
</a>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font">This headline need to fade out</h3>
<span class="light-font">This subheadline should fade out when hover</span>
</div>
</div>
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>