0

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');
});
  • 1
    Can you expand your question a little bit? What code do you have so far? – TheDeadMedic Jun 25 '13 at 7:59
  • Yap, your question is not clear to me either. :( – Mayeenul Islam Jun 25 '13 at 8:58
  • I have edited my question. Hope it is clear now. And thank you for replying. – shubhra Jun 25 '13 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.