Topic: Saratoga Template Enlarge on hover question

[jaltman]

I have added enlarge on hover to the images on my home page on my site.  It works fine except that the XML portion of the Navigation menu stays on top of the enlarged image. Of course we want the flyout portions of the Navigation menu to stay on top and they do.  I added class="enlarge on hover" to the img src line in USA-regional-maps-inc.php and

   .enlarge-on-hover {
      transition: transform 0.3s ease; /* Optional: for a smooth transition */
    }
    .enlarge-on-hover:hover {
      transform: scale(1.7); /* Scale to 170% of original size */
    }

to weather-screen-blue-narrow.css.
 [ You are not allowed to view attachments ]
The enlarged image does cover up the other portions of the page as it should.
How do i make the enlarged image stay on top of the Nav menu?
Thanks!

Jim

[jaltman]

I did not figure out how to stay on top, but i figured out how to move them to avoid the problem. Added a fancy rotation to the enlargement as well.

Jim

[saratogaWX]

Try

.enlarge-on-hover:hover {
      transform: scale(1.7); /* Scale to 170% of original size */
      z-index: 9999 !important;
    }

[jaltman]

AH! Thank you.  I had read about z-index but the error of my ways was that I thought a lower number made it higher in ranking. 

I appreciate your time and knowledge.

Jim