Seeking smooth transition on hover [Was: Please help]

New Here ,
Jan 31, 2021 Jan 31, 2021

Copy link to clipboard

Copied

How to smoothly enlarge pictures on hover in Adobe Muse

TOPICS
How to

Views

66

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 31, 2021 Jan 31, 2021

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">

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 31, 2021 Jan 31, 2021

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?

 

 

Best regards, Euan.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 31, 2021 Jan 31, 2021

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.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 31, 2021 Jan 31, 2021

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines