BUY NOW
  • slidebg1
    Left Top
    Center Top
    Right Top
    Left Center
    Center Center
    Right Center
    Left Bottom
    Center Bottom
    Right Bottom
  • slidebg1
    Left Top (x+50, y+100)
    Center Top (x-50, y+40)
    Right Top (x-90, y+20)
    Left Center (x+30, y-20)
    Center Center (x-30,y+20)
    Right Center (x-50, y-40)
    Left Bottom (x+15,y-20)
    Center Bottom (y-10)
    Right Bottom (x-30, y-30)
  • slidebg1
    TRY THE
    CAPTION ANIMATION
    BUILDER BELOW
    GO AND GIVE A TRY
  • slidebg1
    CREATE AWESOME ANIMATIONS

How to Align Captions ?

Each Caption is positioned via Absolute Position relative to the left/top corner of the Grid. The Grid is the Caption holder. It can but must not be the same size as the Slider itself. Since fullwidth and fullscreen slider can have a higher width or height dimension then the caption Grid itself. Still you can help yourself and position the captions on the center or bottom / right positions in the Grid. For this take a look on the following Settings in the Captions

In case you wish to force the Aligns go to the real corners of the Slide and break the Grid size, you can do this via some special options. See example: 04B.Sample-AlignForce.html

Caption at Center Center

			<div class="tp-caption medium_bg_asbestos lft"
				data-x="center"
				data-y="center"
				data-hoffset="0"
				data-voffset="0"
				data-speed="800"
				data-start="3300"
				data-easing="Power4.easeOut"
				data-endspeed="300"
				data-endeasing="Power1.easeIn"
				data-captionhidden="off"
				style="z-index: 6">Center Center
			</div>

To move vertical or horizontal the caption from that aligned position, you can use the hoffset and voffset settings

Center Center with -30px in the horizontal and +20px in the vertical direction

			<div class="tp-caption medium_bg_asbestos lft"
				data-x="center"
				data-y="center"
				data-hoffset="-30"
				data-voffset="20"
				data-speed="800"
				data-start="3300"
				data-easing="Power4.easeOut"
				data-endspeed="300"
				data-endeasing="Power1.easeIn"
				data-captionhidden="off"
				style="z-index: 6">Center Center
			</div>

In case you set the data-x and data-y with a value (not like center, right or vertical top, center, bottom) the captions will be aligned to the left top corner.

Left Top (default) Align, and simple positions

			<div class="tp-caption medium_bg_asbestos lft"
				data-x="250"
				data-y="180"
				data-speed="800"
				data-start="3300"
				data-easing="Power4.easeOut"
				data-endspeed="300"
				data-endeasing="Power1.easeIn"
				data-captionhidden="off"
				style="z-index: 6">Center Center
			</div>