[spring]

how do you make them. how do they exist.

[WILLOW]

it's basically you take a class.

.class { width: 350px; opacity: 0.5;}

and then you tack hover at the end of it

.class:hover { width: 350px; opacity: 1;}

so when the mouse is hovered over it, it changes to the new css.

as well, most people use transitions so the change between the two css stylings is smoother, but that's just a general preference.

an example template wise would be...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed augue vel neque pulvinar rhoncus at in nibh. Donec interdum odio ut feugiat tristique. Cras at scelerisque mauris, ut eleifend quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque elit quam, posuere vitae faucibus nec, convallis pharetra erat. Maecenas lacinia facilisis tortor, lobortis imperdiet erat fermentum nec. Nam mattis sem sed odio egestas porttitor. Vivamus ac elit accumsan, scelerisque ligula ac, elementum augue. Sed fringilla sagittis nunc, at varius sem gravida a.

[newclass=.disyo]width: 350px; opacity: 0.5; background: #E01B5D; border-radius: 0px; padding: 50px; transition: all 0.5s ease; -webkit- transition: all 0.5s ease; -ms- transition: all 0.5s ease; [/newclass]
[newclass=.disyo:hover]width: 250px; opacity: 1; background: #5E132C; border-radius: 50px; transition: all 0.5s ease; -webkit- transition: all 0.5s ease; -ms- transition: all 0.5s ease; [/newclass]

[spring]

well, that looks almost too simple .. i'ma try it out. thanks, you're my hero c:

[WILLOW]

no problem! if you have any other questions, feel free to message me.