Experience the magic of masonry on hover! Watch as each card expands and changes the height of all the other cards around

I'm looking to replicate a hover effect similar to thishttps://i.sstatic.net/VrBbV.png

The card should expand on hover, displaying the title, icon, content, and a "click here" button. The other cards that are not being hovered over should only show the title and icon without changing the column height. However, currently when the hover effect is activated, it also adjusts the height of other columns, resulting in blank space at the bottom. Is there a way to achieve a masonry effect on hover state? I attempted using a masonry cdn for Bootstrap, but the hover functionality did not work properly as the cards were overlapping. I am utilizing Bootstrap classes for the grid layout. Is it achievable with just CSS and Bootstrap classes? Here's my code for reference:

.services {
  padding: 50px;
  font-family: "rubik", sans-serif;
}
...
htmlcsstwitter-bootstraphovermasonry

Answer №1

Instead of using flex (as in bootstrap), consider utilizing a grid layout to allow elements to span across multiple rows within the grid when hovered over.

Check out the demonstration below:

.row {/* transform into a 2D grid */
  display: grid;
  gap: 1em;
}
/* introduce breakpoints for adjusting 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));
  }
}
/* eliminate the col elements typically used by Bootstrap, especially if you prefer the grid option */
.row>div {
  display: contents;
}
/* your code modifications can be found 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">
... (omitted for brevity) ...
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strip inline styles from HTML content in django-tinymce

I am experiencing an issue with django-tinymce where it automatically adds inline styles when I save content. I would prefer to remove this behavior and only save the content in plain HTML. Can someone assist me with resolving this problem? ...

htmldjangotinymcedjango-tinymce

How do I set up a 5 column layout for the home page and switch to a 4 column layout for category pages in Magento?

Is it possible to display 5 columns of products on the Magento home page and only show 4 columns in the category area, or is this a pre-set parameter that applies platform-wide? ...

phpcssmagento

Tips for transferring data to index.html from Fetch API

Trying to transfer data from an API to my website has been a challenging task. The structure of my directories is as follows: project > server.js | public public > index.html | styles.css A snippet of my code in server.js shows the process: ...

htmlnode.jsreactjsexpress

Ways to apply a border-bottom to tr elements without affecting td elements

Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border? I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving ...

css

Duplicate the form field and add a button beneath the newly generated elements

Clicking the "Add New" button below will add new fields to the form. While everything is functioning properly, I would like the newly created fields to appear above the button instead of below it. How can this be achieved? (function($) { "use strict" ...

jqueryhtmlforms

Why is my HTML5 class unable to locate the contents of my observable array?

Any help would be greatly appreciated. I've been coding for over fifty years, but I'm relatively new to JavaScript, HTML, and knockout. This project seems promising if I can just get it to function correctly. What follows is one of the many appro ...

htmlajaxknockout.js

What is the best way to add an active class to a clicked menu item that already has a class

I have menu items on the master page, and if users click on that menu item, I want to show it as active. My goal is to append "Active" to the existing class to indicate that it is active. _Layout.cshtml: <div class="menu-items-navigation"> <di ...

c#cssasp.netasp.net-mvc

Is there a way to create a personalized right-click context menu that displays dual links to a specific page on my website?

I want to create a custom right-click menu for users with two choices: Contact (link: Contact Us) Support (link: Support Page) <html> <head> <script type="text/javascript> if (document.addEventListener) { // IE >= 9;other br ...

javascripthtml

Python: encountered an issue when attempting to retrieve the complete text within every <span> tag using BeautifulSoup

I have been searching through various sources but have not yet found a solution that works for me. Below is the HTML file I am trying to work with: ......<span ><span class='pl'>Director </span>: <span class='attrs&apos ...

pythonhtmlbeautifulsoup

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

javascriptjqueryhtmlcss

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

javascriptjsonhtmlparse-platform

Changing CSS classes with each click of the user, using Jquery

Looking for a way to seamlessly switch between two links with different CSS classes each time a user clicks? Here's what's currently happening: <a class="class1" id="class1">Class1</a> <a class="class2" id="class2">Class2</a ...

javascriptjqueryhtmlcss

Android experiencing issues with dynamically loading Border XML

I am having trouble setting a border dynamically for a RelativeLayout. Oddly enough, when I manually add the border in the activity XML file, it displays perfectly. However, when I try to generate the border dynamically, it doesn't appear. border.xml ...

androidcssxmlandroid-layout

Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am ...

htmlcssbootstrap-4

Do you think there is a more optimal method for achieving this?

Here is the core concept: I developed it in a fluid manner like this: Do you have any suggestions for improving the way I implemented this? ...

csshtml

What causes the table formatting to disappear when displaying rows in a Vue component?

When I insert rows manually into my HTML table, all the styles look great. However, when I use Vue components with the v-for directive to render the rows, the columns in the table shift around. Here are the hardcoded rows: <table class="table_body"> ...

htmlcssvue.js

Stopping HTML 5 video playback while transitioning to a different webpage

My website has a layout with a left menu containing video links and a content area where the videos are played. However, I have encountered an issue when switching between videos. Currently, if I click on Video 1 and then decide to watch Video 2 while Vid ...

jqueryhtmlvideo

Is it possible to integrate an html page within a wordpress website?

I'm a WordPress newbie but I have experience with HTML, CSS, JS, and PHP. Can anyone guide me on how to incorporate existing HTML pages into my WordPress site? I recently set up WordPress successfully on my domain hosted by GoDaddy (www.mydomain.com) ...

phpwordpresshtml

Embedding images using a blob or base64 format does not function properly on iOS devices

I'm facing an issue with setting the src of an img tag to display an image. The code snippet below works fine on android, mac, and windows, but it is not functioning correctly on iOS: let base64Image = pageModel.image; this.$currentPageImage.src = `da ...

javascripthtmltypescriptwebkit

Having trouble with adding the copy to clipboard feature

I'm having trouble implementing a copy to clipboard option on my color selector. The goal is to display the selected color on an h3 tag and create a background color generator. Each time a color is chosen, it should appear on screen for us to easily c ...

javascripthtml