Order of stacked divs with absolute positioning

I'm struggling to make a photo expand when hovered over without it expanding under the existing content. My current HTML and CSS code is as follows:

.userCard {width:360px;height:180px;border:1px solid black;float:left;margin:10px;position:relative;font-size:12px;background-image: url('paper.jpg')}
    
    div:first-child {
      opacity: .99; 
    }
    
    .zoom:hover {
        transform: scale(3);
        transform-origin: top left;
    }
 <div class="userCard">
       <table class="myTable" width="100%" cellspacing="0" height="100%">
          <tr valign="top">
             <td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
                <div class="zoom" style="background-color:white;">                      <h1>
                    PHOTO
                    </h1>
                </div> 
             </td>
             <td width="75%">
                <b>A N Employee
                
                <div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
                   <table border="1" cellspacing="0" width="100%" style="font-size:14px;">
                      <tr>
                         <td style="padding:3px;line-height:10px">AM</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
                         <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
                         </tr>
                      <tr>
                         <td style="padding:3px;line-height:10px">PM</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td>
                      </tr>
                   </table>
                </div>
                
             </td>
          </tr>
       </table>
    </div>

I read an article about using the first-child CSS rule but that didn't solve my issue.

Source

I've created a fiddle where I need help - thank you!

https://jsfiddle.net/d76xkyou/1/
htmlcssz-index

Answer №1

To enhance the appearance, simply include a position and z-index properties within the .zoom class.

Refer to the example below:

.userCard {
  width: 360px;
  height: 180px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  position: relative;
  font-size: 12px;
  background-image: url('paper.jpg')
}

div:first-child {
  opacity: .99;
}

.zoom:hover {
  transform: scale(3);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  transform-origin: top left;
  z-index: 9999;
  position: relative;
}
<div class="userCard">

  <table class="myTable" width="100%" cellspacing="0" height="100%">
    <tr valign="top">
      <td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
        <div class="zoom" style="background-color:white;">
          <h1>
            PHOTO
          </h1>
        </div>

      </td>
      <td width="75%">
        <b>A N Employee
            
            <div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
               <table border="1" cellspacing="0" width="100%" style="font-size:14px;">
                  <tr>
                     <td style="padding:3px;line-height:10px">AM</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
                     <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
                  <tr>
                     <td style="padding:3px;line-height:10px">PM</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td>
                  </tr>
               </table>
            </div>
            
         </td>
      </tr>
   </table>
</div>

Answer №2

It was a simple fix for me - all I had to do was increase the z-index.

.userCard {
  width: 360px;
  height: 180px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  position: relative;
  font-size: 12px;
  background-image: url('paper.jpg')
}

div:first-child {
  opacity: .99;
}

.zoom:hover {
  transform: scale(3);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  transform-origin: top left;
  z-index: 5000;
}
<div class="userCard">

  <table class="myTable" width="100%" cellspacing="0" height="100%">
    <tr valign="top">
      <td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
        <div class="zoom" style="background-color:white;">
          <h1>
            PHOTO
          </h1>
        </div>

      </td>
      <td width="75%">
        <b>A N Employee
            
            <div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
               <table border="1" cellspacing="0" width="100%" style="font-size:14px;">
                  <tr>
                     <td style="padding:3px;line-height:10px">AM</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
                     <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
                  <tr>
                     <td style="padding:3px;line-height:10px">PM</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td>
                  </tr>
               </table>
            </div>
            
         </td>
      </tr>
   </table>
</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

Selecting options from a pop-up menu

I've created a dropdown menu with what seems to be correct code. However, there are no errors showing up, but the selected item from the menu is not alerting as expected. Here is the jsfiddle link $(document).ready(function () { // This function ...

javascriptjqueryhtml

What is the method to ensure background images are loaded with SSL from a different domain?

I run an online store and to improve performance, the images are hosted on a different domain. However, when I switch to secure mode using SSL on certain parts of the website, the background images disappear. Trying to view the image directly in the browse ...

css

Tips on adjusting the CSS to fix the scrolling issue caused by images in a carousel slider

I am facing an issue where a scroll is being created and it appears offset on different screen sizes: https://i.sstatic.net/KYTCN.jpg I need help to resolve this problem and make it responsive. Even after trying to add overflow: hidden; it still doesn&a ...

cssbootstrap-5

The identical web address functions as a point of reference for design, however it does not function as an AJAX request

This piece of code is functioning properly: {html} {head> {**link rel="stylesheet" href="http://localhost:3000/CSS/mystyle.css"**} {/head} {body} {/body} {/html} However, when I use the same URL in this ...

cssajaxload

Utilizing Python Selenium to Interact with Buttons

Encountering an issue while trying to use Selenium to click on a tab or button within my web application. Below are the code snippet and CSS selectors: Error message: selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: #t ...

jquerypythonhtmlcssselenium

Issues with the FacebookConnect plugin on PhoneGap Build

Just getting started with PhoneGap build and attempting to create a simple app with a Facebook login button. The documentation for PhoneGap build makes it seem easy to add this plugin. index.html <!DOCTYPE html> <html> <head> <met ...

androidhtmlphonegap-build

What is the method in PHP to send an HTML file along with a value in response to a POST request?

I have a PHP file where I want to include a dropdown list and submit button. The dropdown list should display filenames for the user to choose from. Once the user selects a filename from the dropdown list and clicks the submit button, the PHP file should r ...

phphtml

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

There are no definitive answers to the questions regarding this issue. Some suggest stopping zoom altogether, while others recommend setting the width, which may not always solve the problem. I am working on a web application designed for mobile use with ...

javascriptcssmobile

Using JQuery to find the nearest element and narrowing down the search to its child elements

In my program, I have 3 forms identified by form1, form2, and form3. Each form contains its own set of dropdown lists named drop1 and drop2, along with a submit button. When the submit button is clicked in any form, it checks which option was selected from ...

javascriptjqueryhtmlformsfiltering

Inquire regarding the header image. Can you confirm if the current HTML and CSS for this is the most efficient approach?

This is a preview of my website in progress (Disclaimer: I'm currently learning HTML to build this site, design comes next. I know it's not the conventional way to design a site, but oh well) Check out the site here Is the HTML code for the hea ...

htmlcssheader

A guide to creating smiley emojis using solely HTML and CSS

Is there anyone who can assist me in constructing this happy face? https://i.sstatic.net/yyYYQ.png ...

htmlcss

To activate an underline on text, simply right-click and select "text

All the anchor tags on my website have been styled with text-decoration: none. Additionally, I have added a CSS rule based on a helpful answer: a, a:hover, a:active, a:visited { text-decoration:none; } However, whenever I right-click on a link on my ...

css

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

htmlcss

Is there a way to customize my visual studio code to automatically insert an indented space between curly brackets in CSS when I press enter?

Whenever I try to open curly brackets in CSS and press enter, it simply moves to the next line without adding an indentation as shown below: body { } Despite going through the settings and experimenting with different options, I haven't been able to ...

htmlcssvisual-studio-code

The subpage on Github Pages is failing to load despite the correct URL being entered

While working on a multipage website using React and hosting it on Github pages, I encountered an issue. The website functions perfectly on localhost, but encounters errors when accessing a subpage on Github pages. Upon clicking the subpage link, Github p ...

htmlreactjsreact-routergithub-pages

Tips for automatically filling out a div class form:

I currently have an Autoresponder email form featured on my webpage. Here is a snippet of the code for the section where customers enter their email: <div id = "af-form-45" class = "af-form" > <div id = "af-body-45" class = "af-body af-standa ...

javascriptjqueryclasshtml

Issues with the presentation of HTML DIV elements

I am puzzled by a situation where my HTML layout to present financial data does not seem to update properly in certain browsers. Despite using jQuery and inspecting it with Firebug, the visual display of the parent divs remains unaltered. This issue become ...

jqueryhtmlcss

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it ...

css

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...

javascripthtmlcss

The chatbot text input feature is malfunctioning and failing to display the entered text in the chatbox

Hi there! I'm in the process of creating a chatbot using a basic input text box and button in HTML, with a php start function. Unfortunately, when I enter text into the textbox, nothing is showing up on the screen and the button doesn't seem to b ...

javascriptphphtml