2p new
<style type="text/css">.spread {
display: flex;
width: 840px;
height: 595px;
margin: 0 auto;
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.page2-a5 {
width: 420px;
height: 595px;
position: relative;
background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg');
background-size: 200% auto;
background-repeat: no-repeat;
background-position: right center;
overflow: hidden;
border: 1px solid #ccc;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin: 0 auto;
}
.page2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
width: 70%;
aspect-ratio: 1 / 1;
overflow: hidden;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.page2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="page2-a5">
<div class="page2"><a data-lightbox="album" data-title="Right Highlight" href="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg"><img alt="Right Highlight" src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" /> </a></div>
</div>
by eGrida posted May 13, 2025
