Polaroid:
To create polaroids from your favorite images we have added special CSS3 classes that you can use:
- yjt_polaroid
- yjt_polaroid yjt_tilt
- yjt_polaroid yjt_morph
Polaroids can also use radiusb CSS class:
Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)
Image parent <a... title="My title" will be your polaroid title.
<a href="#" class="yjt_polaroid" title="My Image"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a> <a href="#" class="yjt_polaroid yjt_tilt" title="My Image"> <img alt="My Image" src="images/stories/260x180.jpg" /> </a> <a href="#" class="yjt_polaroid yjt_tilt radiusb10" title="My Image"> <img alt="My Image" src="images/stories/260x180.jpg" /> </a> <a href="#" class="yjt_polaroid radiusb5 yjt_morph" title="My Image"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a>
Polaroid Tilted Group:
Tilted group makes each polaroid tilt to oposite side of it’s neighbour:
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a> <a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a> <a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a> <a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a>
Image Fade:
Image fade is very useful Javascript ( Mootools lib) trick that you can use to fade out/in your images or even show different background on mouseneter:
For demo pourpose we used inline CSS but as you can see this class is very flexible and you can do some real magic by simply adding few CSS lines in your stylesheet.
You would need to use 2 data-ATTR attributes in order to acheive desired effect:
data-yjt_fadeto="FADE_TO_NUMBER (1 = 100% visible, 0.5 = 50% visible )
date-yjt_fadespeed="TRANSITION SPEED IN MILLISECONDS" (1000 = 1sec )
<a href="#" data-fadeto="0.3" data-fadespeed="300" class="yjt_fade"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a> <a href="#" data-fadeto="0" data-fadespeed="1000" class="yjt_fade" style="background:url(images/stories/key.jpg) no-repeat center center;"> <img alt="My Image" src="images/stories/160x120.jpg" /> </a>
Image borders:
There are several image borders that you can use:
- bthin
- bthick
- yjt_border bspace
- yjt_border bspacethick
Images can also use radiusb CSS class:
Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)
<img alt="My Image" class="bthin" src="images/stories/160x120.jpg" /> <img alt="My Image" class="radiusb8" src="images/stories/160x120.jpg" /> <span class="yjt_border radiusb8 bthick"> <img alt="My Image" src="images/stories/160x120.jpg" /> </span> <span class="yjt_border radiusb8 bspace"> <img alt="My Image" class="radiusb8" src="images/stories/160x120.jpg" /> </span> <span class="yjt_border radiusb8 bspacethick"> <img alt="My Image" class="radiusb8" src="images/stories/160x120.jpg" /> </span>
