Creative ways to layer multiple images on top of a background image in Bootstrap/CSS

I'm currently attempting to overlay six .png images on top of a elongated tray-like image. I'm unsure if my current structure is incorrect or if there's a conflict between bootstrap and CSS when trying out position: absolute and position: relative (which I eventually removed). This is the expected outcome:

https://i.sstatic.net/OxzRk.png

However, this is what I have achieved so far:

https://i.sstatic.net/yBTvI.png

Below is the code I am using.

HTML code:

<div class="d-flex flex-row mt-2">
        <div class="">
            <img class="tray" src="../../../assets/images/Generals/Icon_1.png" alt="">
        </div>
        <div class="">
            <img class="tray-icon" src="../../../assets/images/Generals/Icon_2.png" alt="">
        </div>
        <div class="">
            <img class="tray-icon" src="../../../assets/images/Generals/Icon_3.png" alt="">
        </div>
        <div class="">
            <img class="tray-icon" src="../../../assets/images/Generals/Icon_4.png" alt="">
        </div>
        <div class="">
            <img class="tray-icon" src="../../../assets/images/Generals/Icon_5.png" alt="">
        </div>
        <div class="">
            <img class="tray-icon" src="../../../assets/images/Generals/Icon_6.png" alt="">
        </div>
        <div class="">
            <img class="tray-icon" src="../../../assets/images/Generals/Icon_7.png" alt="">
        </div>
</div>

CSS code:

.tray-icon{
    width: 70%;
    transition: transform .2s; 
}

.tray{
    width: 100%;
}

.tray-icon:hover {
    transform: scale(1.5); 
}

Any thoughts on how I can align my output with the desired outcome?

htmlcssbootstrap-4

Answer №1

After analyzing the information/code provided in your question:

  • To ensure each image displays on a new line, set display: block; for each one.
  • Center everything by utilizing text-align: center; which centers inline/inline-block elements or margin: 0 auto; which centers block and inline-block elements.
  • In the .d-flex.flex-row container, position the dark blue image upward with margin: -40px auto 0;, position: relative; top: -40px;, or transform: translateY(-40px);.

Your code should resemble the example below, taking into account exceptions like box-shadow usage:

.d-flex.flex-row {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
/* Defines the appearance of the dark blue square */
.d-flex.flex-row::after {
    content: "";
    background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=500&height=70);
    width: 500px;
    height: 70px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    margin: -40px auto 0;
    display: block;
    background-size: cover;
}

/* Styles for image containers */
.d-flex.flex-row > div { 
  display: inline-block;
  margin: 10px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
  overflow: hidden;
}

/* Styling for images */
.d-flex.flex-row > div img { 
  display: block;
}
<div class="d-flex flex-row mt-2">
  <div class="">
      <img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
  </div>
    <div class="">
      <img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
  </div>
    <div class="">
      <img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
  </div>
    <div class="">
      <img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
  </div>
    <div class="">
      <img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
  </div>
    <div class="">
      <img class="tray" src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=50&height=50" alt="">
  </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

Is CSS the only way for Python Selenium to locate an element?

My attempt to log in to the Apple website using Selenium has hit a roadblock. When I try to locate the 'sign-in button' using find_element_by_id, an error pops up indicating it's actually a CSS selector. What exactly does that imply? I was ...

pythonhtmlselenium

Unusual problem arises with image hover on Chrome browser

I'm currently working on an HTML/CSS website that incorporates an image magnification effect when hovering over images. Everything seems to be functioning correctly, except for one minor issue in Chrome. Upon page load, the images seem to jitter and r ...

htmlcssimagegoogle-chromehover

What is the best way to run a JavaScript function once another function has finished executing?

I am looking to ensure that a JavaScript function runs only after another one has finished executing. Here is the code I currently have: $(window).load(function(){ $('#dvLoading').fadeOut(2000); }); window.addLoadEvent = function() { $('#p ...

javascripthtmlexecute

Include numerous values within a hyperlink

Is there a way to pass three values through a link without displaying them in the URL? ...

phpjavascripthtml

Is it feasible to create jQuery Tabs without using a navigation `<ul>` element?

I have noticed that all jQuery Tab systems I've come across utilize a <ul> with links, separate from the tab content div. Is there a way to implement the following structure (pseudocode used here)... <div class="tab"><a href="#tab1"> ...

jquerycssjquery-tabs

How can I divide a div by utilizing word wrap?

My CSS-styled div is pretty straightforward .text { text-transform: capitalize; color: #FFFFFF; background: #918a8a; opacity: 0.6; font-size: 2em; height: 80px; width: 200px; } It creates a grey box w ...

htmlcss

How can the color of the <md-toolbar> be customized?

Here is a glimpse of how my code appears on CodePen: I am aiming to have the background color of "Sidenav Left" match that of "Menu Items", which is designated by the class .nav-theme { background-color: #34495E } I attempted to override it like this ...

htmlcssangularjsangular-material

Retrieve the identifiers of various HTML elements and store them in an array

Within a div, there are multiple objects. I am trying to retrieve the IDs of all elements based on their class, knowing that the number of elements may vary. So far, my attempt has been: arr = $(".listitem #checkBox").hasClass('checkedItem').att ...

javascriptjqueryhtml

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

javascripthtmlcss

Unable to show the query results using PDO

I am facing an issue where I am unable to display the results of a query that should fetch multiple records and show them on the page. It seems like there might be an error in my syntax within the loop, but I'm not certain. //query to retrieve commen ...

phphtmlmysqlpdo

Creating a Top Navbar with Fixed Position and Container Specifications in Bootstrap 4

When creating a Bootstrap 4 Navbar, it defaults to having the properties of a container-fluid instead of container. How can one change it to have the properties of a container? <nav class="navbar fixed-top navbar-light bg-faded"> <a class="navb ...

twitter-bootstrapnavbootstrap-4twitter-bootstrap-4

Hovering over the designated area will reveal the appearance of

I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :h ...

htmlcsstwitter-bootstraphoverbootstrap-4

Preserving the scroll position of "md-content" when navigating between various views using "ngView"

While using angularJs and implementing ngView, it's known that scroll position is maintained when navigating back and forth between different views. However, I've incorporated angular material directives like md-toolbar and md-content in my views ...

htmlangularjsangular-material

Gather information from "div" tag with the class attribute using Python

I am looking to extract specific financial data (referred to as the Key data) that is housed within <div> </div> tags. I then aim to consolidate this extracted information into an excel sheet which already contains additional harvested data. Th ...

htmlpython-3.xbeautifulsoup

container that fades away, while the popup remains visible

Is it possible to fade the background of a container without affecting the pop-up form inside? I've come across some solutions, but they all seem to treat them separately. Here's what I'm trying to achieve: <div class='wrapper ...

jqueryhtmlcss

When clicking on Submit, the code does not acknowledge the Verify Function

I am currently facing an issue with implementing the JQuery Ui function "Verify();" to ensure that the name, age, country, and date fields are completed before allowing form submission. Even though I have written the verify function to execute when the us ...

htmljquery-uisubmitverifyrequired-field

Marketo Email Template Validation Issue: "element 'table' is not allowed in this document type"

I ran into some issues while trying to customize a Marketo template for a client. Specifically, I encountered validation errors when attempting to insert a table above the main content box. Since I am fairly new to this, I could use some guidance from so ...

htmlemailtemplatesmarketo

How to incorporate diagonal lines in CSS within its parent container?

Is there a way to create a diagonal line that fills in and fits perfectly into a box using just CSS, without the need for any background images? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; ...

htmlcsscss-transformsdiagonal

Python - Selenium: A guide to locating elements based on color

I have a situation where I need to select only the "Claim" button from the first div, even though both div cases are very similar. Is using background color a good way to identify my element? Or do you have any other ideas? 1. <div class="well well-sm ...

cssselenium

Is there a way to transform a Base64 image into a specific file type?

Is it possible to integrate my website with an iOS device and utilize the device's camera functionality? After capturing an image, the camera returns it in a base64 image format. Is there a way to convert this to a file type? If the mobile device pr ...

javascripthtmlbase64filereader