CODEWITHSUNDEEP
htmlcss
SystemX
SystemX

Reputation: 549

How to present gallery like a network using HTML / CSS?

I'm working on a website, and I need to make this kind of presentation below! So, how can I do that easy way, and with html, css or how ?

Showing Images inside the website like this plan Thanks !

Upvotes: 1

Views: 249

Answers (2)

shyamm
shyamm

Reputation: 560

implementing first presentation will be much easier as compared to other by using bootstrap grid system. however second is also possible to implement with css. but it will require more css for responsive design..!

Upvotes: 0

Frazer Wilson
Frazer Wilson

Reputation: 161

The first example would be simpler, using a CSS grid system and then using pseudo elements on boxes to add the connecting lines between them like

<div class="row">
  <div class="box connect-down">box 1</div>
  <div class="box connect-left">box 2</div>
  <div class="box connect-up">box 3</div>
  <div class="box connect-right">box 4</div>
</div>

The second example would be much harder, I'd suggest using absolute positioning to place the items at specific locations, and maybe separate divs for the connecting lines using the transform rotate to place them

<div class="box" style="position:absolute;top:40px;left:30px;">box 1</div>
<div class="connector" style="width:2px;background:grey;height:200px;transform:rotate(40deg)"></div>

There are many thumbnail image galleries out there which might be better to download and adapt.

Upvotes: 1

Related Questions