Features – Images

There are several styles to control appearance of the images. Your images can be aligned to the left or right, centred, with or without captions. Clicking on an image can open a large version in a lightbox window. Additionally, with a simple CSS class you can add an animated overlay shown on mouse hover.

Paragraph with image aligned to the right. Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.

Paragraph with image aligned to the left. Donec accumsan, arcu ac congue vulputate, metus metus sollicitudin tellus, in ultricies nisi dui non est. Morbi scelerisque, velit laoreet mattis lacinia, eros lectus pharetra dolor, quis suscipit massa ante id est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sit amet leo diam, non blandit tellus. In consequat facilisis condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam lacus enim, ultricies vitae tempus quis, sagittis ut leo. Maecenas porta, justo nec pharetra adipiscing, erat metus scelerisque tortor, ac fringilla velit velit quis felis. Sed adipiscing quam eu nibh volutpat vel convallis erat ornare. Fusce eu diam arcu. Curabitur tempor mi id magna accumsan quis tristique augue egestas. Nullam arcu ligula, molestie eget placerat ac, mattis a mi. Quisque ut porttitor justo. Praesent eu lacus elit.

The above image is centered. Curabitur tincidunt magna et nulla molestie non consectetur felis commodo. Vivamus aliquam sapien id nisi sagittis accumsan. Aliquam sit amet mauris nibh, porttitor molestie sapien. Vivamus vitae neque tortor. Vivamus eu laoreet ante. Cras ut sapien diam, ut adipiscing odio.

Lightbox effect (prettyPhoto)

Lightbox effect will display a large version of an image in a modal box. In the Acorn template the popular prettyPhoto jQuery plugin is used to achieve this effect.

Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.

Image overlays

A simple CSS class added to the image link tag will make animated overlay layer appear on mouse hover. The overlay can show either a "link" or "enlarge" icon.

Suspendisse a urna quam, vitae rhoncus erat. Suspendisse ultricies felis ut est placerat id hendrerit tortor tempor. Sed vel felis nunc. Suspendisse tortor est, ornare quis cursus in, auctor sed velit. Vestibulum feugiat massa sit amet nunc pulvinar vel bibendum mi mattis. Pellentesque sodales blandit libero, quis feugiat sapien bibendum vitae. Etiam tempus risus in justo euismod ut egestas nibh placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean libero odio, accumsan eu elementum sit amet, dignissim vitae lacus. Pellentesque nibh tortor, laoreet in tempus vitae, sodales sit amet lorem. Vivamus pellentesque tortor a nibh feugiat pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras quis dolor ante. Integer condimentum urna eu urna bibendum vel viverra ipsum sodales. Donec ut justo turpis, et interdum mi. Maecenas aliquet consequat urna, luctus volutpat nunc suscipit pellentesque.

To learn more check the documentation.