Jump to content
Dylan.baker

Style sheets inside image properties

Recommended Posts

Hi there.

Somewhat new to building frog sites, wanted to know if anyone has any experience using the style sheet and style options under the image properties of images inserted into text widgets. We have been trying to see if we could animate buttons in text widgets as you would in HTML but we arent sure how exactly. 

Thanks, Dylan.

Link to comment
Share on other sites

Been playing with this and here is what I've had some success with so far

<style>
.grow:hover{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}</style>

The above will scale/zoom the image by adding 'grow' to the image css stylesheet.

<style>
  .shrink:hover{
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
</style>

The above will shrink the image by adding 'shrink' to the image css stylesheet

<style>
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
</style>

The above will tilt the image by 10 degrees by adding 'tilt' to the image css stylesheet

<style>
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>

The above will morph the image from a it's original shape to a circle by adding 'morph' to the image css stylesheet

Been fun playing. Cheers for the video Graham. 

Edited by Phil T
correction
  • Like 1
Link to comment
Share on other sites

I have just tried it and had no problems. Bit below did have to be in it's own html widget though. I have attached an image that it definitely works on.

<style>
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>

 

lesson-study.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...