Pictures displaying various shapes in contact with each other

I have a unique challenge involving an image that has been physically cut into puzzle-shaped pieces.

Is there a way to align these individual puzzle pieces using only HTML and CSS to create the illusion of a single cohesive image once assembled?

It's important to note that I have separate physical pieces, and I'm not utilizing methods like image maps or sprites.

Edit: The challenge is not your typical puzzle scenario; it requires the capability for one or more pieces to be altered without impacting the overall appearance of the complete image.

Additional Edit: A new aspect to consider is that some images may consist of multiple "pieces" with gaps in between them. For instance,

ABCD
EFGH
IJKL
MNOP

represents the original image broken down into individual letters. There could be instances where
A C
G
form a single piece, leaving blank spaces elsewhere and creating an incomplete structure.

This translates to:
A0C0
00G0
0000
0000

where 0 denotes an empty space.

The above configuration won't appear as is; it will actually display

A0C
00G

only.

In essence, we're dealing with overlays here. The default arrangement would assign the lowest z-index to the base images so that any displayed pieces will possess a higher index.

Apologies if this issue seems somewhat convoluted.

htmlcss

Answer №1

To create a custom layout, set the position:relative property on the parent div and apply position:absolute to the images within it.

You can then adjust the positioning of the images using properties like top, left, bottom, and right.

Make sure to specify the height and width of the parent div, which should be equal to or larger than the combined dimensions of the image pieces.

Check out the following Example

.container{ float:left; position:relative; width:400px; height:400;}

.image-1{position:absolute; top:0; left:0; width:200px; height:100px; background:#888;}
.image-2{position:absolute; top:0; left:200px; width:200px; height:200px; background:#666;}
.image-3{position:absolute; top:100px; left:0; width:150px; height:100px; background:#333;}
<div class="container">
  <div class="image-1">img1</div>
  <div class="image-2">img2</div>
  <div class="image-3">img3</div><!-- insert img tags here -->
</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

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

"Problem with binding a dropdownlist to an object causing the selected object not to return

I have successfully bound an object to a dropdownlist using Knockout 2.2.1. The binding correctly displays the items in the list, but I am facing difficulties retrieving the selected OBJECT. To illustrate this issue, I have created a JSFiddle: http://jsfid ...

htmlselectdrop-down-menubindingknockout.js

What could be causing my elements to shift out of place?

Here is the box I created: BOX Now, I want to position another box near the input of the BET box. <div id="x2"></div> <!-- HTML ---> /* CSS */ #x2{ width: 40px; height: 40px; background: cornflowerblue; } The layout after ...

htmlcss

What is the best way to dynamically include CSS in AngularJS?

Hello, I am currently attempting to add CSS dynamically but for some reason it is not working. Below you will find the code that I have been using: angular.module('myApp', [ 'myApp.controllers','myApp.services']). config([&ap ...

cssangularjs

What is the best way to showcase Json API content on an HTML page?

I possess a strong proficiency in html and css, however I lack experience in utilizing javascript. My aim is to showcase the date received from an API onto an html page Despite several attempts, I have not been able to achieve success yet. var getJSON ...

javascripthtmljson

How can I customize the appearance of a checkbox button in JavaFX?

I am currently working on styling a JavaFX scene with CSS in a stylesheet. The goal is to apply styles to all the "basic" elements of the scene when it loads. My issue lies in finding the correct code combination to change the background color of a button ...

csscheckboxjavafxstyling

What steps should I take to effectively configure the header cache on my website?

After navigating through various links and attempting different solutions such as adding <meta HTTP-EQUIV="EXPIRES" CONTENT="Thu, 31 Dec 2015 12:00:00 GMT"> to my header without success, I am struggling to find a comprehensive guide on how and wher ...

htmlcaching

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

Here is the HTML code to consider. The term 'response' was modified to 'reason', by removing 'sp' (<del> tag) and adding 'as' (<ins> tag), while also removing 'se' (<del> tag). <div &g ...

javascriptc#jqueryhtmlhtml-agility-pack

The HTML code as content

While working on an AJAX project, I ran into this issue: http://jsbin.com/iriquf/1 The data variable contains a simple HTML string. After making the AJAX call, I noticed that the returned string sometimes includes extra whitespaces. I attempted to locat ...

javascriptjqueryhtml

Dynamic WordPress Website Designs

Seeking recommendations for responsive WordPress themes that offer extensive CSS and structural customization options. The goal is to retain all of WordPress's built-in features, such as blogging capabilities, while having the freedom to completely co ...

wordpresscsswordpress-theming

Maintain the values of radio buttons, dropdowns, and checkboxes using Javascript

When I click on a radio button, it activates a drop down menu. Upon selecting different values from the drop down, various checkboxes become visible. Now, I want to preserve the selection of the radio button along with the selected drop down values and ch ...

javascriptphpjqueryhtmlmysql

Struggling with certain CSS design elements

I'm encountering some CSS styling issues. The button in my form remains perfectly positioned when I resize the window, but the inputs are moving around. Why is this happening? Also, when a button is pushed, a h2 element with a little arrow needs to b ...

htmlcss

Is the second parameter of the function being used as a condition?

Why is it necessary to validate the helpText argument within the function to be non-equative to null when its ID is linked with the span tag? The functions task is to set and clear help messages in the form field using built-in CSS classes. <input id ...

javascripthtmlcssformsif-statement

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?

Greetings! I am currently learning how to implement AJAX with jQuery to load an HTML document into a div element within another HTML document. Here is the approach I am using: function pageload() { $.ajax({ url: 'Marker.aspx', ...

javascripthtmljquery

If the content within a <div> element exceeds the available width, a horizontal scrollbar will be displayed

I have a scenario where I am using an absolute div to overlap another div. The div that overlaps is the absolute one (.content), and if the overlapped div (.left) doesn't fit the screen width, a horizontal scroll bar does not appear. How can I automat ...

htmlcss

What is the best way to customize the appearance of a form element within an angular-schema-form schema without affecting the overall

Currently, I am in the process of constructing a form using the incredible angular-schema-form. Creating the form schema object has been a success so far. My goal is to configure all the form components within the schema using the x-schema-form property in ...

cssangularjsionic-frameworkangular-schema-form

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

javascripthtmlgoogle-maps

Loading screen featuring an outlined blueprint of design elements

Can anyone identify the technology or language used to create the preloader screen on websites like the one shown in this link? The elements have a sweeping shine effect while loading. This style of preloader screen can be seen on popular websites such as ...

javascripthtmlcss

Add a date to my database using an HTML form

I am having trouble inserting a date into my database using PHP. Everything else inserts correctly, but the date reverts to the default 0000-00-00 as if nothing was entered. I have set the data type for the date field. Here is the code snippet: <?php ...

phphtmlmysql

Fixing Cross-Browser Issues with the OnScroll Function

window.onscroll = function() { if( window.XMLHttpRequest ) { var bodyId=document.getElementById('bodymain'); if (bodyId.scrollTop > 187) { //make some div's position fixed } else { //mak ...

javascripthtmlcross-browser