Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create a simple CSS gallery without using JavaScript

How to create a simple CSS gallery without using JavaScript

How to create a simple CSS gallery without using JavaScript
How to create a simple CSS gallery without using JavaScript
  • Currently 3.5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 3.5/5 (4 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

This article demonstrates how to create a simple gallery using only CSS.

The most interesting part is that the gallery replaces the main picture if you click on thumbnails usually this is only possible if you use JavaScript. As a rule, only JavaScript can work with click events.

This gallery uses a trick with anchors in tags a.

HTML code

The gallery consists of two blocks of pictures. One block contains small pictures (thumbnails), and the other large ones.

The gallery can only work if all anchors are unique, like these: pic1, pic2, pic3, pic4, pic5.

<div id="gallery">
  <ul id="navigation">
    <li><a href="#pic1"><img alt="" src="small_nature1.jpg" /></a></li>
    <li><a href="#pic2"><img alt="" src="small_nature2.jpg" /></a></li>
    <li><a href="#pic3"><img alt="" src="small_nature3.jpg" /></a></li>
    <li><a href="#pic4"><img alt="" src="small_nature4.jpg" /></a></li>
    <li><a href="#pic5"><img alt="" src="small_nature5.jpg" /></a></li>
  <div id="full-picture">
    <div><a name="pic1"></a><img alt="" src="large_nature1.jpg" /></div>
    <div><a name="pic2"></a><img alt="" src="large_nature2.jpg" /></div>
    <div><a name="pic3"></a><img alt="" src="large_nature3.jpg" /></div>
    <div><a name="pic4"></a><img alt="" src="large_nature4.jpg" /></div>
    <div><a name="pic5"></a><img alt="" src="large_nature5.jpg" /></div>

CSS code

The block with large pictures must have the width which is equal to the width of one of the large pictures. Also CSS property overflow must have hidden set as a value for this block. Pictures with anchor links must be inside of this block. 

Small pictures must have links with the corresponding anchors which relate them with large pictures.

As a result, after clicking on a small picture, a corresponding large picture will be shown in another block (block with large pictures), actually, technically speaking, it will be scrolled to the corresponding picture in this block.

#gallery {
  width: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 2px solid #003C72;

#navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;

#navigation li {
  padding: 0;
  margin: 0;
  float: left;
  clear: both;

#navigation li a img {
  display: block;
  border: none;

#navigation li a {
  display: block;

#full-picture {
  width: 500px;
  height: 375px;
  overflow: hidden;
  float: left;

Live demo

The following archive contains the example above:


Read also

Simple CSS3 gallery with zoom effect

Simple CSS3 gallery with zoom effect

Details about "float" property

Details about "float" property

Discussion (total 14 comments)

July 04, 2013 at 04:43 am
I use your code and I have three problems
1.If I click on thumbnail then the page go up
2.The full-picture have a red board and I can't remove it
3. I can't add a href in a full-picture

Thanks in advance Dimitris from Greece
Gary Horne
July 04, 2013 at 07:40 am
Great tutorial, thanks.

How could I have 2 columns of thumbnails on the left.

would it be another <ul>

Administrator User
Administrator User
July 04, 2013 at 09:40 am
Hello Dimitris!
You have to understand that the gallery uses a trick. So, this gallery was created to show that it's possible to do: pseudo click without JavaScript. I would recommend not to use it for live sites. For such purposes you need to use JavaScript (jQuery) gallery or CSS3 gallery.
Answers on your questions:
1. You can do with CSS3 by pseudo-class target, if you really need it I can do a simple example of using it.
2. I can't see it.
3. You can, just add image inside tag a:
<div id="full-picture">
  <div><a name="pic1"></a><a href="http://basicuse.net"><img alt="" src="large_nature1.jpg"></a></div>

Hello Gary Horne!
It can be done by many ways, but yours is the simplest one. Just add one more column after another and increase the width of an element #gallery from 600px to 700px. I have checked, it works for me.
July 04, 2013 at 10:02 am
Thank you for your reply.
Now I understand the code. You are right, I have to use another code with javascript.
However your gallery is amazing. Smart trick!
July 24, 2013 at 02:18 am
ON reply of Dimitris number 1
1. You can do with CSS3 by pseudo-class target, if you really need it I can do a simple example of using it.

i really need an example. can u do that?
thanks a lot!!
Administrator User
Administrator User
July 25, 2013 at 04:11 am
Sorry for misunderstanding, but I tried to use target selector in CSS3 and the page was still scrolling to the top. As I know there is no way to prevent this.
Here is article which uses target selector, but has the same problem:
Administrator User
Administrator User
September 24, 2013 at 09:13 am
Everybody who wanted to know how to do the image slider without page scrolling using only CSS3, read this article:
Anselmo Gabriel
March 19, 2015 at 12:47 am
I copied and pasted the html and css code. Linked the css to the html. I also saved the pictures in the same folder. When I opened the index.html, pics are not displayed. What should I do?
Administrator User
Administrator User
March 19, 2015 at 10:39 am
Hello Anselmo Gabriel!
I have added an archive with the example above in the end of the article in order to show that it works perfectly. Please, try and leave a feedback how it works!
July 03, 2015 at 01:52 pm
I've the same problem as Dimitris. Would You like to show us how to use pseudo-class target in this case?
Administrator User
Administrator User
July 03, 2015 at 06:07 pm
Hello Mirena!
Hi! Just use this one:
January 15, 2017 at 01:47 pm
Требуются работники. Обработка зказов на дому.

Без вложений, на системе автоматического приёма и обработки заказов.

Более подробная информация >> obrabotka.zarplatt.ru <<
January 17, 2017 at 11:54 am
Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline-online»

Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами до 11 000 руб.

Работая в нашей компании Вы получаете:

- Соблюдение трудового кодекса
- Полный соцпакет, оплачиваемый отпуск, больничный, санаторий.
- Каждый наш сотрудник на дому гарантированно получает высокий доход. руб. в день.
- Гарантированные стабильные выплаты заработанных денег.
- Выплаты происходят ежедневно на банковские карты или электронные кошельки.

Пройдите регистрацию на нашем сайте. > www.airline.zarplatt.ru <

Без вложений, опыт и профессиональные навыки не требуются!
January 17, 2017 at 02:34 pm
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.

Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.

Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,

достаточно просто зарегистрироваться на нашем сервисе. > www.like.zarplatt.ru <

Post comment


Quick navigation

General navigation