Floating image positioned between two div elements

Attempting to replicate a specific design using HTML/CSS has been a challenge.

I've been struggling to position an image on top of the two divs.

I would greatly appreciate any assistance with the design.

Here is what I have tried so far:

The following code is for a Blazor Component, hence the presence of variables:

.row-centered-elements {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  background-color: #f4f4f4;
}

.card {
  width: 300px;
  height: 400px;
  background-color: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px;
}

.image-container {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
}

.divider img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text {
  padding: 20px;
  text-align: center;
  font-family: Graphik, Arial, sans-serif;
}

.title {
  font-family: GraphikSemibold, Arial, sans-serif;
}
<div class="row-centered-elements" <div class="card">
  <div class="image-container">
    <img class="image" src=@imgBackCard1 alt="Image">
  </div>
  <div class="divider">
    <img src=@imgCircCard1 alt="Divider Image">
  </div>
  <div class="text">
    <h2 class="title">@Title1</h2>
    <p>@ParagraphCard1</p>
  </div>
</div>
<div class="card">
  <div class="image-container">
    <img class="image" src=@imgBackCard2 alt="Image">
  </div>
  <div class="divider">
    <img src=@imgCircCard2 alt="Divider Image">
  </div>
  <div class="text">
    <h2 class="title">@Title1</h2>
    <p>@ParagraphCard2</p>
  </div>
</div>


</div>

Answer №1

To achieve the desired effect, simply apply a negative margin to the divider class and switch its position to relative

.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -36px;
  padding: 0.5rem;
  z-index: 2;
  position: relative;
}

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

Guide on implementing the recently established attribute ID using jQuery

In my code snippet, I am assigning a new id to a button. Here is the code: $("#update").click(function(){ $("#update").attr('id', 'cancel'); }); After changing the id, I want to make it functional again in jQuery by reverting it b ...

Reversing animation in styled components when a prop is set to false

One interesting challenge I encountered recently was passing an open prop to a styled component in order to implement animations for a hamburger icon. Here is the code I used: const StyledBurger = styled.button` display: flex; flex-direction: column; ...

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

Preserve the div's aspect ratio using CSS styling

Is there a way to design a flexible div element that adjusts its width and height in sync with the window's size changes? Do any CSS techniques exist that would allow the height of the div to adapt based on the width, while still preserving its aspec ...

Modify a specific field in a row of the table and save the updated value in a MySQL database

I have successfully retrieved data from a database and displayed it in a table. Now, my goal is to enable editing of a specific field within a row and save the updated value back into MySQL. Here is the code snippet that includes displaying the data in th ...

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

When incorporating the following html/css into a new Angular project created with Angular CLI using 'ng new ProjectName', I encountered issues. Despite adding the CSS to app.component.css or styles.css and the HTML to app.component.html, the Angu ...

Crafting visually stunning interfaces with Material UI

I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

Counting the days: how to calculate without using negative numbers

After performing the calculation, the result shows -30. Is there a way to eliminate the negative sign and get 30 instead? $days = (strtotime(date("Y-m-d")) - strtotime($info['expiredate'])) / (60 * 60 * 24) echo abs($days); Any suggestions on ...

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

Looking for help positioning arrows in HTML/JS for a pop-up gallery

Currently, I am working on developing a Flask application that displays a list of videos fetched from a database in an HTML template. Upon clicking a video link, the video opens and plays in a pop-up window with arrow buttons for navigating to the next or ...

Storing user-provided image files in Laravel: A comprehensive guide

I am facing an issue with a file insert box in my HTML file. The code looks like this: <input id="image" type="file" name="image" value="{{ old('image') }}" accept="image/gif, image/jpeg, image/png& ...

Utilize the "display: flex" property to position an avatar alongside a comment that is wrapped

Looking for a solution similar to the problem presented in this Stack Overflow thread about positioning text next to an image, but specifically when using "display: flex". We are facing an issue where a comment, consisting of an avatar image and accompany ...

What is the method for obtaining distinct hover-over values for individual items within a dropdown menu?

If utilizing angular2-multiselect-drop down, what is the correct method to obtain distinct hover over values for individual items in the drop down? When dealing with standard HTML, you can directly access each element of the drop down list if it's ha ...

Adding ids dynamically to href elements in Vue.js

As a newcomer, I am facing an issue with dynamically adding an id to my href tag. Below is the code snippet: <div class="col-md-6" v-for="Product in data"> <div class="panel panel-default" > <div class="panel-heading"> ...

Adjusting the width of rows in tables for th and td elements

Hi there, I'm having trouble with aligning the data inside a table. The table alignment seems off, and I'm struggling to fix it. Can anyone lend a hand with this? The only thing I can't remove is the height: calc(100vh - 346px); as it's ...

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

Evaluating the initial value from an array for radio buttons in Angular using Typescript

I am trying to retrieve the first value from an array that I receive through a get request via an api. Below is my HTML code: <div class="row" class="select-options" *ngFor="let options of paymentOptions;let idx = index"&g ...

Eliminate the excess space at the bottom of rows in Materialize CSS

Having difficulty adjusting the padding between two rows in materializecss Troubles with Padding https://i.sstatic.net/KFe1w.png Seeking to eliminate the bottom padding. Managed to remove left and right padding with the following code: <div class="c ...