I am facing some issues with an image popover functionality using CSS.
I have a demo here:https://codepen.io/ashlythomas/pen/MWdMVME
“
<code>img {
width: 23%;
border: 2px solid green;
transition: opacity .3s ease 0s, transform .3s ease 0s;
transform: scale(1);
}
img:hover {
z-index: 10;
transform: scale(1.3);
}
</code>
<code>img {
width: 23%;
border: 2px solid green;
transition: opacity .3s ease 0s, transform .3s ease 0s;
transform: scale(1);
}
img:hover {
z-index: 10;
transform: scale(1.3);
}
</code>
img {
width: 23%;
border: 2px solid green;
transition: opacity .3s ease 0s, transform .3s ease 0s;
transform: scale(1);
}
img:hover {
z-index: 10;
transform: scale(1.3);
}
“
Hovering any images should scale that image and pop over the other contents on the page. But only the left side of the image is visible when hovering and the right side hides behind the existing content in the page.
Any help would be appreciated.