Skip to main content
Hector The Inspector
Hector The Inspector
Participant
September 27, 2020
Question

Effects/shrink/grow

  • September 27, 2020
  • 4 replies
  • 734 views

Hi, I would like to use CS3 Effects - Shrink/Grow behaviour on multiple jpg. images throughout my site.  The application works fine for my purpose.  Is there any way that I can change the default selections in the Grow/Shrink panel.  Eg. it opens up the panel with Shrink - I select Grow...  Shrink to Centre - I want Top Left Corner... Toggle Effect is un-ticked - I want to tick box.  This would save me a great amount of time.  I have tried copy and paste the working code to each image/page but get myself in to an aweful pickle.  Thank you for any help.

    This topic has been closed for replies.

    4 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 28, 2020

    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.

     

     

    Nancy O'Shea— Product User & Community Expert
      Hector The Inspector
      Hector The InspectorAuthor
      Participant
      September 30, 2020

      Hi Nancy, thank you for your time and your suggestion/code.  I have discovered that I can type 'E' to open the [Effect Menu], 'G' for the [Shrink/Grow] panel and I can tab through each selection and type the first letter of the selection and it will fill with the result that I want.  eg. type 'G' in the shrink box and [Grow] will appear.  TAB to the next selection and type 'T' and [Top Left Corner] will appear TAB again and press Space Bar and [A Tick] will appear in the empty box.  Not fantastic but a lot easier to use, than going through each drop down and selecting.  Thank you also to all who read my post.  All the best, kind regards.

      O
      osgood_
      Legend
      September 28, 2020

      What is it you are exactly trying to do? There may be a simple copy and paste solution rather than having to select each individual image and use a User Interface to apply the attributes, which can be really, really slow if you have a number of images that you need to apply the effect to.

      Hector The Inspector
      Hector The InspectorAuthor
      Participant
      September 28, 2020

      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.  

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      September 28, 2020

      Which version of DW do you have? I don't have a Shrink/Grow option in my Behavior Effects. 

      I have no idea if panel default settings can be changed permanently or not. I've never gone looking for them in the programming code. 

       

       

       

       

       

       

       

       

      Nancy O'Shea— Product User & Community Expert
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      September 27, 2020

      I'm sorry, I don't know what Shrink/Grow panel you're talking about.  Maybe what you're looking for is a CSS Pulse animation effect? See link below for code and examples.

      https://www.geeksforgeeks.org/css-pulse-animation/

       

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices