我正在尝试创建一个像这样的悬停效果
卡扩展悬停,显示标题,图标,内容和点击这里按钮和其他卡,而不是悬停应该只显示标题和图标,而不改变列高..所以现在发生的是这个
悬停效果的作品,但它也改变,并给予其相同的高度,以其他列,留下空白的底部列..有什么办法,我们可以使一个砖石效果的悬停状态?我尝试砖石cdn的bootstrap,但悬停没有工作,这些卡片是重叠的..我正在为网格使用bootstrap类..这甚至可能与正常的css和bootstrap类?在这里'It’这是我的代码供参考
.services {
padding: 50px;
font-family: "rubik", sans-serif;
}
.services_box {
margin-bottom: 25px;
}
.service-item {
background: #FCFCFC;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 15px;
padding: 25px;
transition: all 0.3s ease-in-out;
}
.service_heading {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.service-item .service-info p {
font-weight: 400;
font-size: 16px;
line-height: 26px;
margin: 0;
margin-bottom: 10px;
}
.service-item .service-title {
font-weight: 500;
font-size: 24px;
line-height: 28px;
margin-left: 20px;
margin-bottom: 0;
}
.service-item .service-title a {
text-decoration: none;
color: #1761AE;
}
.service-item .service-content .icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #D3E9FF;
border-radius: 50%;
z-index: 2;
}
.service-item .service-content .icon i {
font-size: 25px;
}
.service-item .service-button1 .btn-style8 {
border: none;
padding: 0;
text-decoration: none;
margin-top: 10px;
font-weight: 400;
font-size: 16px;
line-height: 26px;
}
.service-item .service-button1 .btn-style8 i {
margin-left: 7px;
transition: all 0.4s ease;
}
.service_content {
margin-bottom: -160px;
display: none;
transition: all 0.4s ease;
}
.service-item:hover .service_content {
margin-bottom: 0;
display: block;
transition: all 0.4s ease;
}
<div class="services">
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
<div class="service-item ">
<div class="service-box-content">
<div class="service-figure">
<div class="service-content">
<div class="service-info">
<div class="service_heading">
<div class="icon">
<span><i class="fa fa-balance-scale"></i></span>
</div>
<h3 class="service-title">
<a href="#">Accelerated Debt Payoff </a>
</h3>
</div>
<div class="service_content">
<p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
</p>
<div class="service-button1">
<a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
<div class="service-item ">
<div class="service-box-content">
<div class="service-figure">
<div class="service-content">
<div class="service-info">
<div class="service_heading">
<div class="icon">
<span><i class="fa fa-balance-scale"></i></span>
</div>
<h3 class="service-title">
<a href="#">Accelerated Debt Payoff </a>
</h3>
</div>
<div class="service_content">
<p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
</p>
<div class="service-button1">
<a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
<div class="service-item ">
<div class="service-box-content">
<div class="service-figure">
<div class="service-content">
<div class="service-info">
<div class="service_heading">
<div class="icon">
<span><i class="fa fa-balance-scale"></i></span>
</div>
<h3 class="service-title">
<a href="#">Accelerated Debt Payoff </a>
</h3>
</div>
<div class="service_content">
<p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
</p>
<div class="service-button1">
<a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
<div class="service-item ">
<div class="service-box-content">
<div class="service-figure">
<div class="service-content">
<div class="service-info">
<div class="service_heading">
<div class="icon">
<span><i class="fa fa-balance-scale"></i></span>
</div>
<h3 class="service-title">
<a href="#">Accelerated Debt Payoff </a>
</h3>
</div>
<div class="service_content">
<p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
</p>
<div class="service-button1">
<a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
<div class="service-item ">
<div class="service-box-content">
<div class="service-figure">
<div class="service-content">
<div class="service-info">
<div class="service_heading">
<div class="icon">
<span><i class="fa fa-balance-scale"></i></span>
</div>
<h3 class="service-title">
<a href="#">Accelerated Debt Payoff </a>
</h3>
</div>
<div class="service_content">
<p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
</p>
<div class="service-button1">
<a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
<div class="service-item ">
<div class="service-box-content">
<div class="service-figure">
<div class="service-content">
<div class="service-info">
<div class="service_heading">
<div class="icon">
<span><i class="fa fa-balance-scale"></i></span>
</div>
<h3 class="service-title">
<a href="#">Accelerated Debt Payoff </a>
</h3>
</div>
<div class="service_content">
<p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
</p>
<div class="service-button1">
<a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1条答案
按热度按时间fcwjkofz1#
你可以用grid来代替flex(由bootsrap使用),让元素在网格的2行或更多行中悬停。
演示的想法: