Shift the card and all associated elements downwards

My challenge lies in adjusting the placement of an image within a card, without it overlapping text or other images. How can I achieve a layout where the top half displays the bottom part of the image and the bottom half contains additional elements like text and images?

Below is my current CSS:

.card {
  margin-left: 30px;
  margin-right: 30px;
  width: auto;
  border-radius: 8px;
  position: relative;
  display: block;
  margin-top: 100px;
  overflow: visible;

  div {
    position: absolute;
    top: -95px;
    width: 100%;
    text-align: center;
  }


  img:not(.castImg) {
    width: 80%;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    display: block;
    margin: -100px auto 0;
  }
}

The desired design that I am trying to replicate looks like this:

https://i.sstatic.net/GBNsj.jpg

htmlcssionic-framework

Answer №1

To ensure the elements fit underneath each other and overlap, you need to create sufficient space.

Personally, I suggest wrapping the image and card together in a div so you can position them as desired and add margin-bottom to separate each card. However, this method may vary depending on your code.

Here is a suggestion to try:

.card {
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
    border-radius: 8px;

    position: relative;
    // height: 150px;
    display: block;
    margin-top: 350px; /* changed */
    overflow: visible;

    div {
        position: absolute;
        top: -95px;
        width: 100%;
        // z-index: 2;
        text-align: center;
    }


    img:not(.castImg) {
        width: 50%; /* changed */
        // margin: auto;
        border-radius: 8px;

        -webkit-box-shadow: 0 8px 6px -6px black;
        -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;


        display: block;
        // width: 128px;
        // height: 128px;
        // margin: 30px auto 0;
        margin: -200px auto 0; /* changed */
    }
}

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

Determining the post_thumbnail's dimensions by force

How can I maintain a constant image size for post thumbnails on my website, regardless of the original image's dimensions? I attempted to achieve this using the following code: <?php if (has_post_thumbnail()) the_post_thumbnail(array(400, 200)); ...

phphtmlcsswordpress

How can you determine the HTML element where a mouse click took place?

Is it possible in JavaScript to identify the HTML element where a mouse click occurs without having an event listener attached to the elements? Essentially, I want to be able to capture the mouse click event and determine the specific element on the page ...

javascripthtmleventsdom

I am having trouble getting the CSS Dropdown menu tutorial from line25.com to work properly

As a complete newbie to web design and programming, I decided to take on a blog page project as a way to teach myself about the intricacies of coding. With no specific goal in mind other than experimenting with different features and trying to figure thing ...

cssdrop-down-menu

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties

Is it possible to use jQuery to update CSS styles in an AJAX request

Is it possible to update the CSS of divs that are injected into files but do not exist in the main HTML file? In my main HTML file, I have: <div id="container"> <div id="page"> <!placeholder> </div></div> I am having tr ...

htmlcssajaxjquery

See-through navigation bar custom-made for materializecss

I've been trying to make my navbar transparent using materializecss, but all my attempts so far have resulted in it turning white. Any suggestions would be greatly appreciated. Thank you! Here is the code I tried: <nav> <div class="nav-w ...

htmlcssmaterialize

The active class in the Bootstrap carousel is not updating when trying to change

I am struggling to make the Twitter Bootstrap carousel function properly. Although the slides automatically change after the default timeout, the indicators do not switch the active class, resulting in my carousel failing to transition between slides. Ini ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Ways to identify a disconnected RTCPeerConnection

Currently, I am exploring a WebRTC demo on my Chrome browser and have successfully set up a video conference. However, I am facing an issue when one of the peers disconnects, such as refreshing the browser. I am unsure how to detect this disconnection on t ...

htmlwebrtc

What could be causing my jQuery dialogs to lose their draggable functionality?

I've been struggling with making a dialog in jQuery draggable even though I've included 'draggable: true'. Can anyone help me figure out what's causing the issue? Here is the HTML code snippet: <div class="lessonDetails"> ...

phpjqueryhtmldialogdraggable

Leverage XMPP with the power of HTML5

I have been intrigued by the integration of xmpp (Extensible Messaging Presence Protocol) with html5 and javascript. How can one implement an xmpp chat in html5? ...

htmlxmpp

Tips for adjusting the width of a div based on a variable

I'm working on an editable table and I need to dynamically adjust the width of a div whenever the content in a td changes. It seems like my jQuery code isn't doing the trick. Any suggestions on how to fix this issue? var form = document ...

javascriptjquerycss

Ways to access real HTML components within a Chrome extension instead of the initial source code

I am currently developing a Chrome extension, When using Chrome's Inspect Elements panel, all HTML page elements are displayed at the bottom. Is there a way to retrieve all those elements using JavaScript? The original source code of the page does ...

javascripthtmlgoogle-chromegoogle-chrome-extension

There seems to be an issue with XAMPP as I am unable to start my server due to an

A problem has occurred: Apache shut down unexpectedly. 11:58:07 [Apache] This could be caused by a blocked port, missing dependencies, 11:58:07 [Apache] insufficient privileges, a system crash, or another shutdown method. 11:58:07 [Apache] Click on ...

phphtmlmysqlxampp

"Bringing in a Nunjucks Macro - How to Easily Use It

I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...

javascripthtmlnode.jsnunjucks

Inject a variable into a Sass mixin to encompass multiple style attributes

I have created a Sass mixin for box-shadow effects in my project: @mixin box-shadow($hLength, $vLength, $blur, $spread, $colour, $type:""){ @if $type != "" { -webkit-box-shadow:$type $hLength $vLength $blur $spread $colour; -moz-box-s ...

cssvariablessassmixins

How can I resolve the issue of event listeners in a for loop executing concurrently instead of sequentially?

Being new to JavaScript, I am faced with a challenge that I'm trying to overcome. The following example illustrates the issue I'm struggling with. for (let i = 0; i < 3; i++) { test(); console.log("2"); } function test() { documen ...

javascripthtml

A guide on how to bring a TypeScript class into another TypeScript class

I find myself struggling more than necessary with this task. Working with Ionic 3/Angular, I began creating a component and realized it wasn't exactly what I needed. Essentially, the class simply triggers an Ionic popup and, if the user clicks ' ...

angulartypescriptionic-framework

Connecting Django pages

Currently in the process of building a python application using Django web framework. This app allows users to log in and create personal goals, which are then stored in a database for easy access. However, I'm encountering some challenges when trying ...

pythonhtmldjango

Need a clearfix solution for Internet Explorer 6/7?

While developing a website, I have come across the micro clearfix hack from here. It's working well, but I do have a question regarding it that I'd like some clarification on. Within the clearfix hack on the webpage, there is the following code ...

csscss-float

Each time the web animation is utilized, it gets faster and faster

As part of an assignment, I am working on creating an interactive book that can be controlled by the arrow keys and smoothly comes to a stop when no key is being pressed. However, I have noticed that with each arrow key press, the animation speeds up. Bel ...

javascripthtmlarraysthree.js