6
Replies
Hi Nancy, thank you for your reply. The panel that I am talking about can be found in WINDOWS / BEHAVIOURS / EFFECTS / Shrink/Grow tab. (behaviour/attributes opens on R/H/S above FILES column). Click on Behaviours and the + sign. It will open a drop down menu. Choose EFFECTS and then choose Shrink/Grow a panel will appear. see pic attached. You need to have the image in the page selected and then you can apply the effect to it. You can see that the panel opens with a default selection. I have to change [Shrink] to [Grow].....[Centre] change to [Top Left Corner] and tick the un-ticked box. I have many pages with images on that I wish to apply this to... My question is, can I somehow change the defaults in that panel when it is opened to show [Grow]... [Top Left Corner] and box already ticked as the new defaults. The application works fine as it is....but I have to change these settings each time I open the panel.
This is HTML5 and pure CSS code. No MM behaviors, no jQuery & no JavaScript.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Effects</title>
<style>
/**Basic Layout**/
body{background:antiquewhite;}
.container {
width: 98%;
margin: 0 auto;
}
/* Special Rules for devices over 700px wide */
@media only screen and (min-width: 699px) {
.container {
width: 90%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-around;
}
}
img {
max-width: 100%;
vertical-align: baseline;
}
/**CSS Animation**/
.grow {
transform: scale(50%);
transition: 1000ms;
transition-property: transform;
}
.grow:hover { transform: scale(100%); }
.shrink {
transform: scale(100%);
transition: 1000ms;
transition-property: transform;
}
.shrink:hover { transform: scale(50%); }
</style>
</head>
<body>
<div class="container">
<div>
<h3>Mouseover to Grow Image</h3>
<img class="grow" src="https://dummyimage.com/400x350" alt="placholder"> </div>
<div>
<h3>Mouseover to Shrink Image</h3>
<img class="shrink" src="https://dummyimage.com/400x350" alt="placholder"> </div>
</div>
</body>
</html>
Post back if you have any questions.
AdChoices