Using NewClass Instead of Presto

You should use NewClass instead of Presto. It works consistently, you get better control of what's going on, and you have more effects and actions at your disposal.

Examples with markup snippets here for those of you who'd prefer just to grab it and mess around with it on your own.


Presto vs NewClass

Presto basically does one thing: it makes an element appear on hover. And it doesn't work very well.

NewClass does anything. Well, anything that's possible with CSS. It gives you the power to consolidate your styles in CSS classes and gives you access to pseudo classes, which allow you to define special states of your elements.

How to mimic Presto with NewClass

You need to set up 1-2 newclasses for this. It's as easy as adding the following (minus the asterisk) to the body of your post:
[div][*attr="class","presto"] (class content here, if any)[/div]


and defining the newclass at the bottom of your post:

[*newclass="#presto"]background-image:url('http://i.imgur.com/fuZTaSY.png');width:444px;height:560px;-moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 01.2s;[/*newclass]
[*newclass="#presto:hover"]background-image:url('http://i.imgur.com/iKcjWQK.png');width:444px;height:560px;-moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 1.2s;[/*newclass]


On hover it will change from whatever style is defined in the #presto newclass to the #presto:hover newclass.

It basically comes down to a couple of attributes:
-moz-transition-duration: 1.2s;
-webkit-transition-duration: 1.2s;
-o-transition-duration: 1.2s;


They each work on different browsers (-moz for firefox, -webkit for chrome and safari, -o for opera) which is why you need all of them. 1.2s specifies the transition time (i like 1.2 seconds) but you can change that easily.

You can see an example on this post.

How to better mimic Presto with NewClass

The first way is good for images and big block areas like backgrounds, but doesn't work so well on text. To achieve a presto effect on text or divs containing text, you'll need two different newclasses - a wrapper element around a content class. You can see an example of that on this post.

The code for this will wind up looking like so:

[div][*attr="id","prestoWrapper"]
(Any content here will activate the presto hover effect, but will not be hidden and will not change on hover.)
[div][*attr="class","prestoContent"]
All content here will be hidden until you mouseover the prestoWrapper area.
[/div]
[/div]


and then at the bottom, the newclass:
[*newclass="#prestoWrapper .prestoContent"]color:#000000;visibility:none;-moz-transition-duration: 1.2s; -webkit-transition-duration: 1.2s; -o-transition-duration: 01.2s;[/*newclass]
[*newclass="#prestoWrapper:hover .prestoContent"]color:#4A4A4A;visibility:visible;[/*newclass]


Note that the color change isn't strictly speaking necessary, but the fading effect doesn't happen without it. (the visibility state doesn't really transition.)

UPDATE: The lovely Stare pointed out that you can use an opacity value (a percentage) instead of visibility (a boolean) because that'll transition fine.