How to Overlap Images?

  • Resolved weemy

    (@weemy)


    5 months, 2 weeks ago

    hey everyone!

    so i have this minor issue that ive been trying to solve. im not using any plug-ins or anything (its a tad confusing and quite frankly overwhelming) but im trying to overlap two images. i assume i have to set the z-index somewhere but i keep getting errors and im not sure how to do it.

    here’s what the code block looks like:

    <!-- wp:image {"lightbox":{"enabled":false},"id":20,"width":"95px",
    "aspectRatio":"0.72","sizeSlug":"full","linkDestination":
    "custom","className":"is-style-default",
    "style":{"spacing":{"margin":{"left":"var:preset|spacing|30"}}}} -->

    <figure class="wp-block-image size-full is-resized is-style-default" 
    style="margin-left:var(--wp--preset--spacing--30)"><a href="LINK">
    <img src="IMG1.PNG" alt="" class="wp-image-20" style="aspect-ratio:0.72;
    width:95px"/></a>
    </figure>
    <!-- /wp:image -->

    <!-- wp:image {"id":144,"sizeSlug":"full","linkDestination":"none",
    "style":{"spacing":{"margin":{"top":"-60px"}}}} -->
    <figure class="wp-block-image size-full" style="margin-top:-60px">
    <img src="IMG2.PNG" alt="" class="wp-image-144"/></figure>
    <!-- /wp:image -->

    thank you 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    5 months, 2 weeks ago

    Use CSS margin properties to move one image into the desired position from where the browser would normally place it. Negative distances are allowed with margins, but not padding. You don’t necessarily need to alter z-index, the second occurring image will appear over the other. If the move completely overlays the first image, the first image will be totally obscured unless you set a partial opacity value to the top image.

    Alternately, you could set position: relative; and use top and left to move the image, but this will leave a “hole” where the image used to reside. Subsequent content doesn’t move to fill the hole. When you use the margin approach, subsequent content moves to fill the hole.

    Depending upon your overall layout goals, one approach will make more sense than the other.

    • This reply was modified 5 months, 2 weeks ago by bcworkz. Reason: added comment about negative distances
    Thread Starter weemy

    (@weemy)

    5 months, 2 weeks ago

    thank you for your message @bcworkz ! so unfortunately regardless of which image i try to set the negative margin to in order to overlap them, it seems that the result is always the same. i always get IMG2 above IMG1 regardless of which one’s margin i edited

    as for setting the position, whenever i try to add that piece of code for that, i keep getting the error Block contains unexpected or invalid content maybe im not doing it correctly, but im not super familiar with CSS

    thank you !

    bvbaked

    (@bvbaked)

    5 months, 1 week ago

    Image 2 over Image 1 is expected. Unless you use a z-index property, whichever is later in the markup will be above the earlier. The margin is only used to move one into the space of the other and that doesn’t control the layering

    While I’m not certain of how you’re doing it, the error is likely due to manual content that is not accounted for in the save function. What is saved in the database will need to match what is in the editor so if you’re adding it directly to a block it can cause issues. That CSS is best added somewhere else, and you can target your layout by including a class selector instead of directly editing the blocks

    • This reply was modified 5 months, 1 week ago by bvbaked.
    Moderator bcworkz

    (@bcworkz)

    5 months, 1 week ago

    if you’re adding it directly to a block it can cause issues

    Indeed. The block editor is very particular about what block attributes are permitted.

    You should be able to use the code editor to add an inline <style> HTML element with appropriate CSS code. Alternately, add the CSS to the Additional CSS section of the customizer (classic theme) or style book (block theme). The Additional CSS section is output for all posts and pages. To target a specific page, look at the post’s <body> tag class attribute values. It’s theme dependent, but there is usually a class such as postid-1234 you can use to target a specific page.

    In case you haven’t discovered it yet, check out your browser’s element inspector tool that’s part of its developer tool set. To get to it in most browsers, right-click the image and select the “Inspect” option. With the tool, you can edit, add, or remove CSS and immediately see the effect on the page. Changes in the tool do not persist. Once you have arrived at desirable CSS, copy/paste it to an inline style or Additional CSS section. An added benefit — when you’re adding CSS in the tool, it’ll auto-suggest CSS code that’s possible to use.

    Thread Starter weemy

    (@weemy)

    5 months, 1 week ago

    whichever is later in the markup will be above the earlier. 

    @bvbaked i knew there had to be some underlying rule that i did not know of, thank you so much i was able to do it!! 😀

    also @bcworkz using inspection is actually genius thanks a lot for the tip! ill keep that in mind

    appreciate u guys! again, thanks a lot<3

Viewing 5 replies - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.