Micro-interaction: Image expansion
An image expansion interaction is used to show a larger image to users. This interaction is triggered by clicking the expansion icon located at the right-bottom corner of the image. The icon can be overlayed to any images, include but are not limited to the following exapmles.
Disable the scolling when an image is expanded.
For image expansion, use the following code to wrap the image and the icon
<div class="expandableimg">
<!-- Change the following image class and url -->
<a href="#"><img class="card-img-top" src="https://via.placeholder.com/400x300" alt="Card image cap"></a>
<!-- Icon trigger -->
<a href="#img1" class="expansionicon"><i style="font-size:1.5rem" class="fa fa-arrows-alt" aria-hidden="true"></i></a>
<!-- Image lightbox -->
<span class="lightbox" id="img1" style="">
<span class="lightboximg" style="background-image: url('https://via.placeholder.com/400x300');"></span>
<a href="#_" class="closeicon"><i style="font-size:1.5rem" class="fa fa-times" aria-hidden="true"></i></a>
</span>
</div>
Include this following CSS in the page
.lightbox {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 2rem;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.3s;
}
.lightbox:target {
display: block;
opacity: 1;
}
.lightbox span {
display: block;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
transition: opacity 0.3s;
}
.lightbox:target span {
opacity: 1;
}
.lightboximg {
background-size: contain;
background-repeat: no-repeat;
}
.expandableimg {
position: relative;
}
.expansionicon {
position: absolute;
background: white;
bottom: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2rem;
}
.expansionicon:hover {
text-decoration: none;
}
.lightbox .closeicon {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
background-color: white;
width: 2.5rem;
height: 2.5rem;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2rem;
}
.closeicon:hover {
text-decoration: none;
}
Examples
To try out the following examples, click the icons.
Card title
Enter worker information and hearing test results.
Card title
Enter worker information and hearing test results.