Currently, I am in the process of developing an interactive online picture framing tool. My aim is to allow users to customize an image by selecting different border, mount, and frame sizes. These customizations will be reflected in real-time by adding corresponding elements around the image. I want to ensure that the image remains centered within the encompassing #preview div while the borders are applied around it. Can this layout and functionality be achieved solely using CSS, or will it require the implementation of JavaScript/jQuery?
For reference, here is an example:
I have attempted to set the image position as fixed initially, but this caused issues with the containing divs.
Here is a snippet of the code:
Layout:
<div id="preview">
<span id="frame-preview">
<span id="mount-preview">
<span id="border-preview">
<span id="image-preview" class="id-number" ><img src="image.jpg" /></span>
</span>
</span>
</span>
CSS:
#preview {
width:70%;
min-height:300px;
padding:20px 0;
margin:0 auto;
text-align: center;
}
#frame-preview {
outline:0px solid pink;
display:inline-block;
position:absolute;
top:60px;
}
#mount-preview {
outline:0px solid green;
display:inline-block;
}
#border-preview {
outline:0px solid blue;
display:inline-block;
}
#image-preview {
display:inline-block;
}
#image-preview img {
}
JS:
$('#border_size').change(function(event) {
var value = $('#border_size').val();
//alert(value);
$("#border-preview").css({ outlineWidth: value });
});
$('#mount_size').change(function(event) {
var value = $('#mount_size').val();
//alert(value);
$("#mount-preview").css({ outlineWidth: value });
});
$('#frame_size').change(function(event) {
var value = $('#frame_size').val();
//alert(value);
$("#frame-preview").css({ outlineWidth: value });
});
Thank you.