"When you hover over an element, extra information will pop up that only pertains to that specific element and will not impact any surrounding

As I dive into the world of HTML and CSS, I've come across a hurdle when it comes to hovering over divs and displaying hidden elements. The goal is for the card to change color on hover (which I've achieved), expand in size, and reveal hidden content. However, the issue arises when hovering over one card causes all other cards to increase in size as well, even though their hidden information remains concealed. The only workaround I've found is removing 'display:flex' from the .services_cards element, but this causes the entire layout to collapse, preventing the desired expansion effect. I attempted using nth-child selectors without success. Can someone provide guidance on how to solve this problem? To better visualize the scenario, switch to full-screen mode for improved clarity.

.services__cards {
  margin-top: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}
.services__item:last-child {
  margin-right: 0;
}
.services__item:hover {
  background-color: #F78BB6;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.services__item:hover .services__card-header, .services__item:hover .services__card-descr {
  color: #FFF;
}
.services__item:hover .services__learnmore {
  display: inline-block;
}
.services__card-header {
  margin-top: 38px;
  font-weight: 500;
  font-size: 34px;
  line-height: 72px;
  color: #56597A;
}
.services__card-descr {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #919299;
  text-align: center;
}
.services__learnmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-top: 40px;
  display: none;
}
.services__learnmore span {
  margin-right: 5px;
}
<div class="services__cards">
          <div class="services__item">
            <img src="images/cards/card-icon1.png" alt="card-icon image">
            <h3 class="services__card-header">Design</h3>
            <div class="services__card-descr">a plan or drawing produced to show the look and function</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div class="services__item">
            <img src="images/cards/card-icon2.png" alt="card-icon image">
            <h3 class="services__card-header">Development</h3>
            <div class="services__card-descr">Development is defined as the process of growth or new</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div class="services__item">
            <img src="images/cards/card-icon3.png" alt="card-icon image">
            <h3 class="services__card-header">Branding</h3>
            <div class="services__card-descr">The marketing practice of creating a name, symbol or</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div class="services__item">
            <img src="images/cards/card-icon4.png" alt="card-icon image">
            <h3 class="services__card-header">Illustration</h3>
            <div class="services__card-descr">An illustration is a decoration, interpretation or visual</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
        </div>

htmlcss

Answer №1

If you're looking to achieve a specific design, adding a height to your services__item css class can help:

.services__item {
  height: 100%; /* Include the height property here */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}


.services__cards {
  margin-top: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.services__item {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FFF1F9;
  border-radius: 8px;
  padding: 56px 23px;
  margin-right: 30px;
}
.services__item:last-child {
  margin-right: 0;
}
.services__item:hover {
  background-color: #F78BB6;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.services__item:hover .services__card-header, .services__item:hover .services__card-descr {
  color: #FFF;
}
.services__item:hover .services__learnmore {
  display: inline-block;
}
.services__card-header {
  margin-top: 38px;
  font-weight: 500;
  font-size: 34px;
  line-height: 72px;
  color: #56597A;
}
.services__card-descr {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #919299;
  text-align: center;
}
.services__learnmore {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  margin-top: 40px;
  display: none;
}
.services__learnmore span {
  margin-right: 5px;
}

Sample code snippet :
<div class="services__cards">
          <div class="services__item">
            <img src="images/cards/card-icon1.png" alt="card-icon image">
            <h3 class="services__card-header">Design</h3>
            <div class="services__card-descr">a plan or drawing produced to show the look and function</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div class="services__item">
            <img src="images/cards/card-icon2.png" alt="card-icon image">
            <h3 class="services__card-header">Development</h3>
            <div class="services__card-descr">Development is defined as the process of growth or new</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div class="services__item">
            <img src="images/cards/card-icon3.png" alt="card-icon image">
            <h3 class="services__card-header">Branding</h3>
            <div class="services__card-descr">The marketing practice of creating a name, symbol or</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </div>
          <div class="services__item">
            <img src="images/cards/card-icon4.png" alt="card-icon image">
            <h3 class="services__card-header">Illustration</h3>
            <div class="services__card-descr">An illustration is a decoration, interpretation or visual</div>
            <a href="/" class="services__learnmore"><span>Learn more</span><img src="images/cards/arrow.png" alt="arrow image"></a>
          </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

creating a customized grid layout with Bootstrap 5

Is it possible to create a layout similar to the one shown in this image using Bootstrap 5? In addition, I would like to include an image inside every third item. How can I accomplish this with the Bootstrap grid system? ...

htmlcssbootstrap-4bootstrap-5

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

Utilizing the Oruga and Storybook libraries for creating Vue 3 components. The code in the Vue file looks like this: <template> <o-radio v-bind="$props" v-model="model"> <slot /> </o-radio> </template ...

javascriptcssvue.jsvuejs3

Leveraging basscss through NPM/Webpack installation

As a newcomer to the webpack/react app environment, I am attempting to incorporate the Basscss CSS framework into my project. After successfully running 'npm i basscss' and adding require('basscss/css/basscss.css'); to my app entry poin ...

cssnpmwebpack

Coldfusion: The Troubles of an Empty Link href="#" Error

For my CFWheels Coldfusion project, I have been utilizing Adobe Coldfusion Builder 3. In Coldfusion, when you want to output a variable, you typically do something like this: #variable_name# However, I am interested in incorporating an empty link into m ...

javascripthtmlcoldfusionescaping

Difficulty linking CSS to HTML in a Flask web application

My HTML/CSS file is pretty straightforward: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name=&quo ...

pythonhtmlcsspython-3.xflask

Tips for increasing the complexity of your bottom-line animation

Hello everyone, I am currently learning the basics of CSS and have a question about a specific animation effect. Please bear with me if this type of inquiry is not suitable for StackOverflow. In my index.html file, I have the following code: <n ...

htmlcss

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

javascriptcsseventsvue.js

Retrieving details of a row in Codeigniter using a link with a foreach loop

After nearly a month of trying, I am still unable to figure out how to extract the "details" for each row from my table in the view. The table is populated using a foreach loop and I want to display these details on another page when clicking the link labe ...

phphtmlmysqlcodeigniter

Altering the width of an unordered list (<ul>) to fit menu items with the help of jQuery

I had previously asked a question that I need further assistance with: Fitting a <ul>'s width to accommodate the menu items Is there a way to use jQuery to adjust the width of each <ul> within a specific parent <ul> so that the <l ...

jqueryhtmlcssxhtmlmenu

Avoid letting words be separated

My question involves HTML code <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">Lorem Ipsum</div> When I view this on a mobile device, the text appears as follows: Lorem Ip- sum I ...

htmlcss

Executing a post request asynchronously and storing the retrieved data into a variable

Currently, I am in the process of learning AngularJS and attempting to upgrade my current method of fetching data from a web service and dynamically assigning it to a variable that is binded using ng-repeat. My main objective is to implement an asynchronou ...

jqueryhtmlangularjsajax

Tips for avoiding css reanimation when clicking on a calendar

Recently, I have been experimenting with animating an ASP calendar using CSS and JQuery. My approach involves hiding the calendar initially with CSS and then fading it in when certain events occur. The calendar is contained within an AJAX update panel. How ...

jquerycssasp.netajax

Does the onchange function in the dropdown list only work when the first item is changed?

Here is a snippet of my HTML code featuring a list item generated from a database using a foreach loop: <select class="form-control select" id="inventoryitem" name="inventoryitem" onchange="getunit();"> <option>---Select an item---</o ...

javascriptphphtml

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

htmlcsscss-grid

Display various sets of data from multiple models within a single view

My project is focused on Asp.net Mvc and I am encountering a challenge in displaying multiple model data in one view. However, I do not want to showcase it in a list or grid format, instead, I prefer a Form View style. The two modal classes involved are Pr ...

htmlrazormodel-view-controllerviewmodel

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

javascriptjqueryhtmlcss

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

htmlcssangularangular-material

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs