Dylan.baker Posted October 17, 2016 Share Posted October 17, 2016 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 More sharing options...
Graham Quince Posted October 17, 2016 Share Posted October 17, 2016 This might help: https://www.frogcommunity.com/css/image-class Link to comment Share on other sites More sharing options...
Dylan.baker Posted October 19, 2016 Author Share Posted October 19, 2016 Thank you very much, this worked perfectly for our purposes. 1 Link to comment Share on other sites More sharing options...
Phil T Posted October 23, 2016 Share Posted October 23, 2016 (edited) 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 October 23, 2016 by Phil T correction 1 Link to comment Share on other sites More sharing options...
Graham Quince Posted October 25, 2016 Share Posted October 25, 2016 I was curious to see what these would look like, so I've created a page for them: https://www.frogcommunity.com/philtimages Phil - morph doesn't appear to do anything, is it the image choice? 1 Link to comment Share on other sites More sharing options...
Phil T Posted October 26, 2016 Share Posted October 26, 2016 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> Link to comment Share on other sites More sharing options...
Graham Quince Posted October 27, 2016 Share Posted October 27, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now