My Playground

Tiles Gallery with HTML5 and CSS3

Asif Nawaz

Writen on October 25, 2013

Category: Tutorial, web design, web development

Was working to build a theme and created a small gallery. Its so easy to make this type of gallery or this type of gallery is enough in the web. So if you are expert one please leave the page asap 😛

Add the CSS file

[html]<link rel="stylesheet" type="text/css" href="assets/css/style.css">[/html]

This is HTML Markup 

[html]<div class="gallery gallery-col-4">
<div class="item"> <img src="assets/img/01.jpg" alt="">
<a href="#">
<div class="overlay">
<h4>Heading</h4>
<p>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum</p>
</div>
</a>
</div>
<!– ——————— more item can be here ————————— –>
</div>[/html]

There are 3 column style available for the gallery, to get 2 or 3 column style change the class “gallery-col-4” to “gallery-col-2” or “gallery-col-3“.

DEMO Image copyright reserved by MaK’s PhotoGraphy

Gallery DEMO Here

Also gallery demo has added below.

DOWNLOAD AND GITHUB LINK

License: Free to use and abuse 😉

Keep Using it 🙂

  • Ahmad Firoz

    Awesome One ! Cheers.

  • Anam Ahmed

    চ্রম হইছে 😀

  • নাছির

    এইটা কি কাজে লাগিবু o.O

  • Nawaz

    Very nice!

    • hmm, WP plug in with prettyPhoto Popup coming soon 🙂

  • pav

    gr8