Currently utilizing Joomla 3.3, I am seeking to enlarge an image on mouseover.
The html code for the image is as follows:
<img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="Chapter 1: Physical Differences" src="images/chapters/chapter-1-physical-differences.jpg" alt="Chapter 1: Physical Differences" width="311" height="390" />
To trigger the enlargement effect on mouseover, I have incorporated the following CSS code:
.enlarge:hover {
transform:scale(2,2);
transform-origin:0 0;
}
While this solution works effectively, a small issue arises where the enlarged image appears under another smaller image located on the right side of the page. Despite attempting to adjust the z-index property, the desired outcome was not achieved.
Previous state:
On Mouseover: