Increasing the size of a container without displacing the elements beneath it

There is an element on my webpage that, when hovered over, expands to reveal hidden text. The issue I'm facing is that this expansion causes the content below it to shift position. I attempted to use position:absolute, but it did not have the desired outcome.

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  /*position: absolute;*/
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>
htmlcssbootstrap-4css-position

Answer №1

It seems like you're almost there. While using position:absolute is the right approach, there are a few additional styles that need to be added in order to ensure proper positioning and to maintain the parent's background color.

.col {
  padding: 20px;
}

.col:hover {
  background-color: lightgray;
}

.revealOnHover {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  padding: 10px;
  background: inherit;
}

#block1:hover .revealOnHover,
#block2:hover .revealOnHover {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<div class="container">

  <div class="row">
    <div class="col" id="block1">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Lorem ipsum dolor sit amet</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col" id="block2">
      <img src="https://picsum.photos/100/100?random=1">
      <p><b>Excepteur sint occaecat cupidatat non proident</b></p>
      <i class="fas fa-caret-down" style="color: red;"></i>
      <p class="revealOnHover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <p>&nbsp;</p>

  <div style="text-align: center;">
    <a href="https://google.com" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
    <a href="https://agoria.be" target="_blank"><button type="button" class="btn btn-secondary" style="font-weight: bold; margin: 0 auto; margin-right: 2rem; color: #FFF">Click here</button></a>
  </div>

</div>

Answer №2

To ensure consistency in row height, consider adding min-height property to the row class

After applying this modification, your updated class will look like this:

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
min-height: 317PX;}

Answer №3

Have you considered including the following

.container {
  height: 300px;
}

This will help maintain the layout's structure even when new elements are added.

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

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning

Deciphering HTML with the Eyes

So, I find myself in a bit of a bind trying to come up with a title for this question. I have stumbled upon some HTML files that seem so complex, they could only have been crafted by the one and only Lord Lucifer himself. These files contain segments like ...

c#htmlparsing

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...

javascripthtmlcss

Utilizing JavaScript to present JSON data in HTML tables across various sections of a website

Utilizing JScript to retrieve data from a JSON API URL, I have incorporated the data in the JSON file displayed below - containing information on 8 horse races with details like Horse number, Horse name, and their odds. My goal is to create a Jscript code ...

javascripthtmljson

What is the best way to place an icon in the center of a Bootstrap 5 card image?

I'm looking to center an icon within a bootstrap-5 card image. I have an icon that I want to display at the center of my card image, but I'm unsure how to achieve this using either CSS or Bootstrap-5. Can anyone provide guidance on how to accompl ...

cssbootstrap-5

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

javascriptjqueryhtmlcssmatch

What is the best way to activate the cube portfolio using custom jquery?

Is there a way to activate the Cube portfolio filter using custom JQuery? see image here For instance: In my Cube portfolio slider, I have over 20 projects featuring different technologies. When I slide the div, I want the filter to be activated based on ...

jqueryhtmlcss

Steps for leveraging pdfMake with live data

Recently delving into Angular, I've been exploring the capabilities of pdfMake. While I successfully incorporated static data, I'm facing challenges when attempting to utilize dynamic data. Any guidance on how to achieve this would be greatly app ...

javascripthtmlangulartypescriptpdfmake

The Oracle Apex Login Interface with a Touch of Customized Styling

Currently, I'm working on creating a login page in Oracle APEX. While modifying the icon using CSS code, everything seems to be falling in place except for this one particular line: .t-Login-logo { background-image:url(#APP_FILES#LogoUpdated.jpg); bac ...

htmlcssoracle-apex

Implementing reCAPTCHA and PHP for Email Form Submission

Currently using GoDaddy as the web host for my website. Struggling to integrate reCAPTCHA into the email form on my site. I successfully pass the reCAPTCHA test, but emails are not being sent. So far, the website has been built using PHP and HTML only. ...

phphtmlemail

Menu changes when hovering

I want to create an effect where hovering over the .hoverarea class will toggle the visibility of .sociallink1, .sociallink2, and so on, with a drover effect. However, my code isn't working as expected. Additionally, an extra margin is automatically ...

javascripthtmlcsshover

Show the user's username after they have successfully signed in

Hello, I am trying to display the username after a user logs in. Here is the code for the page where I would like to show it: index.php <?php require_once 'classes/Membership.php'; $membership = New Membership(); $membership->confirm_Me ...

phphtmlauthentication

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

I am working with two arrays in my code: bookingHistory: Booking[] = []; currentBookings: any[] = []; Both arrays are populated later in the code. The bookingHistory array consists of instances of Booking, while currentBookings contains arrays of Booking ...

javascripthtmlangulartypescripttypeerror

Change the position of an HTML image when the window size is adjusted

My web page features a striking design with a white background and a tilted black line cutting across. The main attraction is an image of a red ball that I want to stay perfectly aligned with the line as the window is resized, just like in the provided gif ...

javascripthtmlcss

Adding rows dynamically to multiple tables on a single page using a single function

I am facing a situation where I have multiple tables and a function that adds rows to these tables: <table id="table1" style=" border-collapse: collapse;"> <tr id="table1row1">... <tr id="table1row2">... <table id="table2" style=" bor ...

javascriptjqueryhtmlhtml-tableincrement

Adjust the font size within a container using HTML code, no CSS required

Is it possible to directly change the TextSize and TextColor within the HTML Document? I need it to be within this specific box (same class) because of the background color. However, the text size always remains the same. The HTML line is: Which button re ...

htmlcss

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml

Obtaining User Input in React JS within the Fetch Statement

I've written a code to fetch weather data from an API. Currently, the location is set to "chennai" in the link provided. I'd like to make this location user-dependent. How can I achieve this using React? import React,{useState,useEffect} from ...

htmlreactjsapi

Activate a tooltip on the button depending on the value entered in the search field

I need to display a tooltip on the button when the search field is empty. Here is what I have attempted: // Enable hover feature const searchBtn = document.querySelector('.find__btn'); searchBtn.addEventListener('mouseover', () => ...

javascriptjquerycsstooltip

Automatically trigger a page reload using a jQuery function

Currently facing an issue with jQuery. I created a drop-down menu and would like it to expand when the li tag within the menu is clicked. Even though I am using the jQuery click function successfully, there seems to be a problem where the webpage refreshe ...

javascriptjqueryhtmlcssclick