Masonry effect on hover only? card expands on hover, changes other cards height too
I'm trying to create a hover effect like this
the card expands on hover, showing the title, icon, content and click here button and other cards while not being hovered should only show title and icon without changing the column height..
so now what happens is this
the hover effect works but it also changes and gives its same height to other columns, leaving blank space on bottom of the column.. is there any way we can make a masonry effect on hover state? i tried masonry cdn for bootstrap but hover didn't work there, the cards were overlapping.. i'm using bootstrap classes for the grid.. is this even possible with normal css and bootstrap classes? here's my code for reference
.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>Solution
You may take a look at grid instead flex (used by bootsrap) and make the element hovered span through 2 or more rows of the grid.
demo of the idea :
.row {/* make it a 2D grid */
display: grid;
gap: 1em;
}
/* add some break points to redraw the grid columns */
@media (min-width:700px) {
.row {
grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
}
}
@media (min-width:1150px) {
.row {
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
}
}
@media (min-width:1500px) {
.row {
grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
}
}
/* remove the col elements used by bootsraps , best is to remove them from HTML if the grid option is what you want */
.row>div {
display: contents;
}
/* your code, see updates further below */
.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;
}
/* UPDATES */
.service_content {
max-height: 0;
transition: all 0.4s ease;
overflow: hidden;
}
.service-item:hover .service_content {
max-height: 400px;
}
.service-item:hover {
grid-row: span 3
}<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 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>- Animate toggle height from 0 to auto or 100%
- How does the "position: sticky;" property work?
- Disabling android's chrome pull-down-to-refresh feature
- Placing national flags at start of sentence
- Clear-Site-Data "*" : Different behavior in both Firefox and Chrome
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- Add CSS3 transition expand/collapse
- Remove content of p tag
- Email formatting basics (links in plain text emails)
- css file won't load when opening my website
- Should I use the .htm or .html file extension? Which one is correct?
- Can't figure out why element's height is not what I set it to
- How to submit form only once after multiple clicking on submit?
- Remove whitespace from SVG
- Why does CSS ::part override JavaScript element.style?
- Remove "content" CSS property "onclick" button for the entire website
- ReactJS - .JS vs .JSX
- Markdown no break (nobr)?
- Not able to trim displayed value in Dropdown
- Transition between routes in react-router-dom v6.3
- Show div even if empty
- some code i don't understand well in jquery
- Make Search Box closes if user clicks anywhere?
- How to handle required fields in display:"none"
- How to make a DIV visible and invisible with JavaScript?
- Blinking animation
- formvalidation.io external submit button
- webpage templates vs building from scratch
- How to add static text inside an input form
- Google Chrome Developer tools shows browser default font size as 18 pixels?