Copy link to clipboard
Copied
How to smoothly enlarge pictures on hover in Adobe Muse
Copy link to clipboard
Copied
If you can work with code, CSS transform will make your small image bigger. CSS transitions will make the effect smoother.
Add custom CSS to the <head> tag.
<style>
.zoom {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.zoom:hover,
.zoom:active,
.zoom:focus {
/**adjust scale to desired size,
add prefixes for old browsers**/
-ms-transform: scale(2.5);
-moz-transform: scale(2.5);
-webkit-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
position:relative;
z-index:100;
}
</style>
To invoke the CSS above, add the zoom class to your images.
<h3>Image Zoom</h3>
<img class="zoom" src="https://dummyimage.com/250x250" alt="placeholder">
Copy link to clipboard
Copied
Hi Nancy, that's a neat solution. May I ask if the code could be added to the head tag
on the master pages such that it will work across the whole site?
Copy link to clipboard
Copied
Yes, @EuanWilliamson, it should work but as you know, Muse is end of life and should not be used for new projects.
Going forward, I'd prefer to see everyone switch to a real code editor like Dreamweaver, Pinegrow or VS Code. Sitewide CSS rules typically go in the external stylesheet (styles.css) file.
Copy link to clipboard
Copied
As Nancy said.
If you are not across coding so much it may take you a bit of time finding a new platform you can work with let alone moving the sites you have into that so you really need to be doing that ASAP.