Skip to content
forked from itbruno/InContent

Image content with description building with CSS3 and SASS/LESS.

License

Notifications You must be signed in to change notification settings

ethmz/InContent

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

InContent

How To Use

In your HTML document, put the follow code for call the LESS/SASS Compiled:

For SASS compiled:
<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />
For LESS compiled:
<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />

Put the code below in your HTML document:

<div class="pic">
	<img src="img/01.jpg" class="pic-image" alt="Pic"/>
	<span class="pic-caption bottom-to-top">
		<h1 class="pic-title">Pic Title</h1>
		<p>Some description or text.</p>
	</span>
</div>

The .bottom-to-top is the class of effect that your choice.

See demo here.

Here is the list of classes and effect that you can use:

Class Description
.pic-title Title of the image content
.bottom-to-top Effect bottom to top
.top-to-bottom Effect top to bottom
.left-to-right Effect left to right
.right-to-left Effect right to left
.rotate-in Effect rotate in
.rotate-out Effect rotate out
.open-up Effect open up
.open-down Effect open down
.open-left Effect open left
.open-right Effect open right
.come-left Effect come to left
.come-right Effect come to right

License

InContent is released under MIT License.

Test in your Mobile Device

Use some app for read the QR code and test in your mobile. If you dont have, what do you waiting?! =D

Take a look, its Free - QR Reader: iPhone, Android and Windows Phone.

InContent - QRcode

Say hello

About

Image content with description building with CSS3 and SASS/LESS.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 77.1%
  • HTML 22.9%