Jump to content

Style sheets inside image properties


Dylan.baker

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

Strange - no luck here in either Chrome or IE.   The rotate value is set to 360, which i think is causing it to flip all the way around.  Are you seeing it spin?

The border is having no apparent effect either - although all images uploaded to the community already have a border-radius setting.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...