Add Div IDs dynamically to CSS

Question

I am trying my best to convert this amazing design in a wordpress plugin, but since I am not a developer and a noob, I can't get my head around it.

Background image can be added in the post loop with div style. But what about:

-- Dynamic Ids (HTML & CSS) for each div box? -- Clip path for each image?

Is it even possible to do it in wordpress?

EDIT:-

Sorry about not being clear. Below are the codes. Here's the JSfiddle

1. How do I make a sequential loop for the first markup where the post title is so that each post gets an id like box1, box2, box3 and so on.
2. in the second markup where the featured image is going to be a background image, how do I give the same post the id bg1, bg2, bg3 etc.
3. How to do a +240 in the <x> origin in the clip-path for each post.

HTML

<div class="container">
<div id="box1" class="box" data-bg="#bg1">rooftops</div>
<div id="box2" class="box" data-bg="#bg2">streetstyle</div>
<div id="box3" class="box" data-bg="#bg3">citylife</div>
<div id="box4" class="box" data-bg="#bg4">citylife</div>

<div style="background-image:url(http://www.makersquarter.com/images/uploads/homepage/Home-Page-04.jpg); -webkit-clip-path:rectangle(20px,15px,215px,200px);" id="bg1" class="bg"></div>
<div style="background-image:url(http://www.makersquarter.com/images/uploads/homepage/Home-Page-03.jpg); -webkit-clip-path:rectangle(260px,15px,215px,200px);" id="bg2" class="bg"></div>
<div style="background-image:url(http://www.makersquarter.com/images/uploads/homepage/Home-Page-02.jpg); -webkit-clip-path:rectangle(500px,15px,215px,200px);" id="bg3" class="bg"></div>
<div style="background-image:url(http://www.makersquarter.com/images/uploads/homepage/Home-Page-01.jpg); -webkit-clip-path:rectangle(740px,15px,215px,200px);" id="bg4" class="bg"></div>

</div>

CSS

 body { background:#ccc; margin:0; }
.container { /*width:1000px; margin:0 auto; position:relative;*/ } 

.bg { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background-position:50% 50%;
  background-size:cover;
  z-index:1;
} 
.bg.reveal { -webkit-clip-path:none !important; z-index:2; }

.box { 
  width:200px;
  height:200px;
  position:relative;
  z-index:10; 
  float:left;
  line-height:200px;
  text-align:center;
  color:#fff;
  cursor: pointer;
  font-size:20px;
  text-transform:uppercase;
  font-family:Tahoma;
  letter-spacing:1px;
  margin:15px 0 0 35px;
}

JS

$('.box').hover(function(){
  $($(this).data('bg')).addClass('reveal');
}, function(){
  $($(this).data('bg')).removeClass('reveal');
});