After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser but has strange effects on Firefox and Opera.
Is there anyone who can assist me in making this magnifying glass cross-browser compatible?
Here is the code snippet:
<style type="text/css">
#banners_magnifying{
left: 0px;
border-radius: 100%;
border: 0px solid;
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
zoom: 400%;
-moz-transform: scale(4);
/*multiple box shadows to achieve the glass effect*/
box-shadow: 0 0 0 4px #000000, 0 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 20px 2px rgba(0, 0, 0, 0.7);
z-index: 1;
cursor: pointer;
visibility: hidden;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Rest of the script omitted for brevity -->
If you want to see the complete code and try it out yourself, you can visit the jsfiddle link here: https://jsfiddle.net/sjg6w1zx/ Thank you for any assistance provided.
UPDATE: The images have been updated in this post to prevent broken links, now featuring two different figures: one standard and one with a transparent background.
PS. I have made adjustments to the zoom-in lines as follows:
-moz-zoom: 4;
-ms-zoom: 4;
-webkit-zoom: 4;
-moz-transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
I have also removed the line:
zoom: 400%;
Despite these changes, the magnifying glass remains consistent in size across all browsers, yet the images are not zoomed in correctly, even after adjusting according to different viewing zones.