htmlcsstwitter-bootstraphovermasonry
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>- What is the difference between inline-block and inline-table?
- Array lists of HTML elements in order by website in selenium / beautiful soup
- EditorConfig extension for VS Code does nothing
- uploading HTML code to ebay store
- How to access all the direct children of a div in tailwindcss?
- How can I align a logo in the navbar header of an R shiny app created using bslib?
- Text to speech with avatar lip sync, no plug-ins
- ERR_CERT_REVOKED only on Smartphones (connection is not secure)
- IO Is Not Defined - Socket.io
- Is using <footer> inside <form> semantically fine?
- Embedding Reddit Post in Qualtrics Survey not working
- PHP Scrape html page content with tags
- Need to make a clickable <div> button
- What type of this element?
- Print and Print Preview of Web Page not Working Properly in Microsoft Edge Browser
- how can i get element height in javascript
- Scraping hierarchical website in a specific category
- Wrap <img> tag in a new tag and add alt attribute to the <img>
- Remove non-<img> tags from string
- regex for match all <img> tag and extract the "src" attribute
- Check for Table null in Jquery for JSON response
- jQuery how to add image from computer
- XPath for colspan attribute values as browser understands them?
- How to Ensure Each Table Column Occupies 25% Width and Allows Horizontal Scrolling in HTML/CSS?
- Get src value containing a specific keyword from all <img> tags
- How can I get a href,Image src,title from given html using DomDocument
- css animate from top to center
- How to Right-align flex item?
- How to add keydown listener to shadow dom
- Can a HTML telephone link accept spaces in the value?