Display a div when hovering over it, with its position set from the bottom of the main

I am attempting to use CSS to display another div within my main div, but positioned from the bottom of the main div rather than as a block as I am currently testing with my code.

HTML

<div id="main">
   <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
    <div id="hidden">
      <h2><a href="">Link1</h2>
      <h2><a href="">Link2</h2>
    </div>
</div>

CSS

#main {
width: 540px;
border: 1px solid #eee;
text-align:center;
}

#hidden {
display:none;
border: 4px solid #eee;
}

#main:hover > #hidden {
display:block;
}

I would like to achieve a layout similar to the image linked below: https://i.sstatic.net/Q41JG.png

htmlcss

Answer №1

Give this a try:

#content {
    width: 540px;
    border: 1px solid #eee;
    text-align:center;
    position: relative;
}
#hidden-info {
    display:none;
    border: 4px solid #eee;
    position: absolute;
    bottom: 0px;
    background: white;
    width: 100%;
}
#content:hover > #hidden-info {
    display:block;
}

Demo.

How it works:
I adjusted the positioning of the #content div to be relative within the document body, and then set its child, #hidden-info, to be absolutely positioned. This allows the #hidden-info element to move with the parent #content when it is hovered over. Additionally, I set the bottom margin to 0 to ensure that the #hidden-info element sticks to the bottom of the #content div.

Answer №2

Desiring some additional code is what you were seeking!

Utilizing the position attribute code was necessary! It allows you to position an element above another element, a task that is otherwise impossible!

Check out the demo here: http://jsfiddle.net/afzaal_ahmad_zeeshan/R89A8/

I have made changes to the CSS as follows: 

#main {
width: 540px;
border: 1px solid #eee;
text-align:center;
    position: relative;
}

#hidden {
display:none;
border: 4px solid #eee;
}

#main:hover > #hidden {
    position: absolute;
    display: block;
    bottom: 0px;
}

You'll notice that I simply added the position: value and bottom: value attributes to your existing code.

Additionally, the HTML code is structured as: 

<div id="main">
   <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
    <div id="hidden">
        <h2><a href="">Link1</a></h2>
        <h2><a href="">Link2</a></h2>
    </div>
</div>

Remember to properly close all opening tags to ensure valid HTML structure!

Lastly, I did not specify a width and height for the box, so feel free to customize them as needed!

For further information: https://developer.mozilla.org/en-US/docs/Web/CSS/position

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

Transforming jQuery into vanilla JavaScript in order to create a customized dropdown select functionality

I am struggling with converting jQuery code to pure JavaScript for a custom select element. https://codepen.io/PeterGeller/pen/wksIF After referencing the CodePen example, I attempted to implement it with 3 select elements. const select = document.get ...

javascripthtmljquery

Issue with Angular custom tag displaying and running a function

I have created a custom HTML tag. In my next.component.ts file, I defined the following: @Component({ selector: 'nextbutton', template: ` <button (click) = "nextfunc()">Next</button> ` }) export class NextComponent{ nextfunc( ...

htmlangulartypescriptangular-componentscustom-tag

What is the process for creating a three-dimensional Bezier curve using JavaScript, specifically with three.js and WebGL?

I have a good grasp on creating a simple bezier curve, but I am curious about how to transform the curve into 3D. Additionally, I am wondering if it is possible to plot multiple curves to form an image like a cone. Any advice or guidance on this matter wou ...

javascripthtmlthree.js

Using the CSS property `absolute` can result in the input element shifting when entering text in Chrome

My grid layout is causing some issues with the search box placement. Whenever a user starts typing in the input box, it jumps to the other side of the page. After investigating, I realized that the culprit is the position: absolute property. Oddly enough, ...

htmlcss

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

Sizing elements vertically using CSS

Struggling with getting the content area on my web page sized and aligned correctly. I want it to utilize all the vertical visible screen space, leaving 80px at the top and 20px at the bottom. Sometimes, the page may extend further down, requiring scrollin ...

htmlcssvertical-alignment

Steps for generating a div, link, and image that links to another image using Javascript

Hey there, I have a cool picture to share with you! <img src="cards.png" id="img"> <!--CARD PICTURE--> Check out what I want to do with it: <div class="container_img"> <img src="cards.png" id="img"> <!--CARD PICTURE--> ...

javascripthtml

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

javascriptjquerycsshtml

What are the steps to create a vertical split screen using two div elements?

I am attempting to create a split page layout using html and css, but the elements are stacking on top of each other instead of side by side. @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800'); @media (min-width: 5 ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Active bootstrap navigation tabs

I am struggling to maintain the active tab in my left navigation tab. The issue arises when I load the page with the first tab active, and then click on another tab - the new tab becomes active, but the first tab remains active as well. I would like only t ...

htmlcsstwitter-bootstrap

Issues with the responsiveness of Bootstrap 4.5.0 grid system

While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to t ...

htmlcssdjangotwitter-bootstrapbootstrap-4

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Utilizing Material-UI for CSS styling in a live environment

My application has a 'dashboard' feature that utilizes material-ui. Within this dashboard, other apps are called and rendered. While this setup functioned smoothly during development, I encountered issues once switching to a production build. The ...

cssreactjsmaterial-ui

Reveal the concealed element

My webpage features a hidden span element within a div that I would like to reveal when a button is clicked. However, the functionality is not working as expected. Here is my code: <!DOCTYPE html> <html> <head> <meta charset="ut ...

javascripthtml

Is it possible to modify the flex direction in Bootstrap based on specific breakpoints?

I am currently utilizing Bootstrap 4 for my project. I have a div that is styled with "d-flex" and it is meant to display as a row at the "lg" breakpoint (screens 1200px and above). However, on smaller devices such as mobile phones at the "sm" or "xs" brea ...

cssbootstrap-4flexbox

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Looking to create a dynamic navigation bar that adjusts to different screen sizes? On the left side, you want an undetermined number of links, while on the right side there should be a search button. The challenge is to ensure that all links have equal wi ...

htmlcss

Shifting the "active" designation within a dropdown menu to correspond with the user's current page

Recently, I decided to explore the Foundation framework. However, my first stumbling block was figuring out how to use the "active" class in a dropdown menu. I am hoping to have the class applied to the page link that is currently being viewed by the user ...

jquerycsszurb-foundationzurb-foundation-5

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

cssimagehtmlmargin

Using getServerSideProps in Next.js is preventing the global css from loading

In my Next.js application, I have defined global styles in the file /styles/globals.css and imported them in _app.tsx. // import default style import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return <Component {...pageProps ...

cssnext.js