Gallery View (pure JS)

Gallery View

by Rishi Gautam

HTML

<div class='gallery'>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
    <div id='r1c1' class='child'></div>
</div>

CSS

.gallery {
  background-color: #ccc;
  width: 450px;
  height: 250px;
  padding: 5px 5px 5px 5px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.child {
  width: 90px;
  height: 100px;
  margin: 5px 5px 5px 5px;
  float: left;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.child:hover {
  cursor: pointer;
  background-color: #ddd;
}

.selected {
  background-color: #ddd;
}