Dynamic Sizing of Elements + Adaptive Text Overlay

There were 2 obstacles I encountered when trying to create an image-based drop-down menu :

  1. No matter how much effort I put in, I couldn't figure out how to make a flexed element inside a container maintain the same height as the adjacent element. [In my jsFiddle example, each slideout content revealed by hover should match the height of the icons.]

  2. I struggled to place text over each image due to the menu resizing itself based on device width - which is necessary and cannot be compromised. The solutions I found all involved using position:absolute, but I couldn't get it to work. [Ideally, there would be labels on top of each image.]

Feel free to ask for clarifications if needed.

Check out the example in this jsFiddle link. Thank you.

javascripthtmlcssimagelayout

Answer №1

To enhance clarity and promote code reusability, the CSS has been segmented into four primary sections:

  • Globals, which define page defaults and override standard HTML/CSS values
  • Mechanism section for Flexbox Layout settings and element sizing/actions
  • Eye-candy generics focusing on spacing, fonts, and borders for visual appeal
  • Eye-candy theming for color-related features utilizing a custom attribute [theme="gr-blue"], with options for additional themes

Flexbox Layout Tips

To align the .slideout-content to the left or right, you can employ the row-reverse direction and justify-content: flex-end for an odd .menu-item, while using the default row direction for an even one.

Image Text Overlay Strategy

This technique utilizes relative and absolute positioning of parent and child elements respectively. The overlay text is extracted from the data-overlay custom attribute within the child content.

Notable Changes/Warnings

  • The code includes detailed comments and offers alternative applications of the Flexbox Layout.
  • An adjustment was made due to compatibility issues in IE11 with filter: brightness(1.2); consider suitable alternatives.
  • The transparency/opacity of .slideout-content has been slightly modified to showcase hover effects.
  • Viewport-based sizes were implemented where applicable.
  • A strategic shift was made from using child margin to parent padding, particularly crucial when combining relative sizes ('%') with box-sizing: border-box.
  • Opt for flex-grow: 1 instead of flex: 1 to ensure compatibility with IE11.
  • Experiment by changing dir="ltr" to dir="rtl" within the <body> tag to assess document reading order adjustments.

Cross-Browser Testing

The layout has been verified to function seamlessly across Chrome/Edge, Firefox, and IE11 at a minimum screen size of 320x480px without requiring scrolling.

Further Updates

UPDATE 1: Mentioned removal of original footer {...height: 5vh...} as it may lead to overflow issues below the footer

UPDATE 2: Updated CSS rules to position overlay .slideout::after correctly within its parent container for improved alignment. For more insights on this topic, refer to w3schools: CSS Layout - Horizontal & Vertical Align.

Answer №2

To ensure that the content of the menu-top stretches, you must set its display property to flex. Additionally, for the overlay on the image to work correctly, you need the position: absolute rule along with one of the positioning rules such as top right bottom left declared, and its parent element should have a relative position. I've implemented a flexbox-based solution based on your description. Instead of using columns, I made the children wrap at 50%, and used :nth-child(odd) to style the odd children with order: 1 or order: 2 rules to position the menu on the left or right side, accordingly. I also included a .page__wrap class on a div to wrap the entire page, including the header, main content, and footer, allowing them to flex so that the footer remains at the bottom even without scrolling.

body {
  margin: 0;
}

.page__wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: lightgray;
  border-bottom: 5px solid gray;
}

h2 {
  text-align: center;
  margin: 0;
  padding: 2em 0;
}

main {
  flex: 1;
}

footer {
  background-color: gold;
  padding: 1em 0;
  justify-self: flex-end;
}

.slideouts__wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 65rem;
  margin: 0 auto;
}

.slideout {
  display: flex;
  margin: 10px;
  width: calc(50% - 20px);
  justify-content: flex-start;
}

.slideout:nth-child(odd) {
  justify-content: flex-end;
}

.slideout__avatar {
  background-color: red;
  flex: 0 1 auto;
  object-fit: cover;
  position: relative;
}

.slideout__avatar--image {
  display: block;
  width: 100%
}

.slideout__avatar--overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #00000095;
  color: white;
  transition: .2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slideout:nth-child(odd) .slideout__avatar {
  order: 2;
  position: relative;
}

.slideout__menu {
  display: flex;
  flex: 0 0 50%;
}

.slideout__menu--items {
  display: none;
  flex-direction: column;
  justify-content: stretch;
  margin: 0;
  padding: 0;
  flex: 1;
  list-style: none;
  background-color: #736E6F;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 1%;
}

.slideout__menu--item {
  flex: 1;
  display: flex;
  border: thin inset #888585;
    border-radius: 5%;
}

.slideout__menu--item:hover {
  filter: brightness(1.2);
}

.slideout__menu--item--anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
    color: goldenrod;
}

.slideout__avatar:hover + .slideout__menu .slideout__menu--items {
  display: flex;
}

.slideout__avatar:hover .slideout__avatar--overlay {
  opacity: 1;
}

.slideout__menu--items:hover {
  display: flex;
}
<div class="page__wrap">
  <header>
    <div class="header__container">
      <h2>links of links</h2>
    </div>
  </header>
  <main class="slideouts__container">
    <div class="slideouts__wrapper">
      <div class="slideout">
        <div class="slideout__avatar">
          <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
          <div class="slideout__avatar--overlay">
            <p>the overlay</p>
          </div>
        </div>
        <div class="slideout__menu">
          <ul class="slideout__menu--items">
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li>
          </ul>
        </div>
      </div>
      <div class="slideout">
        <div class="slideout__avatar">
          <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
          <div class="slideout__avatar--overlay">
            <p>the overlay</p>
          </div>
        </div>
        <div class="slideout__menu">
          <ul class="slideout__menu--items">
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 3</a></li>
          </ul>
        </div>
      </div>
      <div class="slideout">
        <div class="slideout__avatar">
          <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
          <div class="slideout__avatar--overlay">
            <p>the overlay</p>
          </div>
        </div>
        <div class="slideout__menu">
          <ul class="slideout__menu--items">
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 3</a></li>
          </ul>
        </div>
      </div>
      <div class="slideout">
        <div class="slideout__avatar">
          <img class="slideout__avatar--image" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
          <div class="slideout__avatar--overlay">
            <p>the overlay</p>
          </div>
        </div>
        <div class="slideout__menu">
          <ul class="slideout__menu--items">
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 1</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 2</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 3</a></li>
            <li class="slideout__menu--item"><a class="slideout__menu--item--anchor" href="#">link 4</a></li>
          </ul>
        </div>
      </div>
      
    </div>
  </main>
  <footer>
    <div class="footer__container">
      <p>footer text</p>
    </div>
  </footer>
</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

NodeJS - The server returns a 404 error before ultimately displaying the requested page

I'm having trouble with my nodeJS application. When I make an asynchronous call using ajax, the server first responds with a 404 error before loading the page. The application functions properly, but I keep receiving repetitive logs stating "Can' ...

javascriptnode.jsajaxhttp-status-code-404

What steps do I need to follow in order to properly execute this HTTP request?

Recently, I came across this amazing tool called SimplePush.io that is perfect for one of my projects. It works flawlessly via curl, as shown on their website: ~ $ curl 'https://api.simplepush.io/send/HuxgBB/Wow/So easy' or ~ $ curl --data &ap ...

javascriptnode.jshttpcurl

Exploring the elements of Ext.js gridpanel and content components

Currently, I am diving into the world of Ext.js and finding it to be quite distinct from the asp.net ajax library despite some initial similarities. My goal is to populate a grid with test data formatted in JSON. The code snippet below illustrates my atte ...

javascriptasp.netajaxextjsclient-side

I'm struggling to figure out why the CSS isn't working properly

i found this markup like shown here i am curious why it appears that lines 12 & 13 .notes:link span, .notes:visited span { ... seems to be functioning .comments span, background-position: -16px -16px; } .permalink:link span, .permalink:visited sp ...

css

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

javascripthtmlreactjs

Vue JS i18next: Handling Single Translation String Fallbacks

Recently, I've been utilizing i18next, and I decided to set a fallback value for some translated strings in case they are not available in the selected language. Here's an example: en: base.json "yes": "yes" "no": "no" fr: base.json ...

javascriptvue.jsinternationalizationi18next

Storing a selected database column as a variable from an HTML page in Node.js with Express

My website showcases flight information pulled from a MySQL database. The process begins with a form where users select destinations and dates for their desired flight. Once the form is submitted, users are directed to another page where flights matching t ...

javascripthtmlmysqlnode.jsexpress

In IE8, a border is applied to the max-width property when the width is set to

I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...

htmlinternet-explorer-8css

What is preventing this Node JS code from successfully serving a static PNG file?

To the administrators, I have spent hours scouring various resources for answers related to Node Js, Express, and serving static files. Despite my efforts on stackoverflow and other platforms, I have yet to find any solution that works for me. If my questi ...

htmlnode.jsexpressstatic

Setting up package.json to relocate node_modules to a different directory outside of the web application:

My web app is currently located in C:\Google-drive\vue-app. When I run the command yarn build, it installs a node_modules folder within C:\Google-drive\vue-app. However, since I am using Google Drive to sync my web app source code to Go ...

javascriptnode.jsnpmpackage.jsonyarn-v2

What is the best way to conceal elements that do not have any subsequent elements with a specific class?

Here is the HTML code I have, and I am looking to use jQuery to hide all lsHeader elements that do not have any subsequent elements with the class 'contact'. <div id="B" class="lsHeader">B</div> <div id="contact_1" class="contac ...

javascriptjqueryhtml

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons Below is some c ...

htmlcssangulartypescript

What is the best way to utilize recently added modules in React if they are not listed in the package.json "dependencies" section?

[I have updated my question to provide more details] As a newcomer to working with React, I may be asking a basic question. Recently, I installed several modules and will use one (example: @react-google-maps/api) for clarification. In my PC's termin ...

javascriptreactjsnpmnpm-installpackage.json

React - the constructor binding issue with 'this' keyword

I am a beginner in React and I am learning through creating a simple test application. However, I am facing an issue with "this" binding. I set up this app package yesterday using "create-react-app", so all the necessary plugins including babel should be u ...

javascriptreactjs

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...

javascripthtmlnode.jsexpresshttpserver

Reconstruct complete picture from IIIF JSON data

If the IIIF info.json is structured in the given manner: { "@context" : "http://iiif.io/api/image/2/context.json", "@id" : "http://iiif.nli.org.il/IIIF/FL47675519", "protocol" : "http://iiif.io/a ...

jsonimageurlrequestiiif

"Using JavaScript to trigger a button click event, and then

I have a question that I think may sound silly, but here it is. I have this code snippet: <script type="text/javascript"> $(document).ready(function(){ var email_value = prompt('Please enter your email address'); if(email_value !== null){ ...

javascriptphpjqueryajax

What is the proper way to arrange CSS classes in a specific order?

I am facing some confusion regarding the CSS and the class attribute. I had always believed that the order in which multiple classes are specified within the attribute value holds significance. It was my understanding that the later class could or should o ...

htmlcss

Creating a dynamic grid design with images using the <ul><li></li></ul> HTML tags

Trying to create a responsive grid of images that adapts to changes in browser size. Is there a way to achieve this using a list? Ideally, I want the images to be evenly spaced in rows. For example, if there are three rows of four images on top and one r ...

htmlcss