There is a code

It is necessary to place one more block in front of the orange blocks. I understand that perhaps the question is amateurish, but still.

.our_work { width: 100%; text-align: center; } .bg { position: relative; float: left; width: 44%; min-width: 20px; min-height: 22px; height: 222px; margin-left: 5%; background-color: yellow; } .bg:first-child { margin: 0; } .blcok { display: inline-block; width: 42%; height: 50%; } .img_work { position: absolute; } .abs { right: 5%; } .abs1 { left: 30%; } 
 <section class="our_work"> <div class="adler_work blcok"> <p>текст примера</p> <div class="bg"></div> <figure class="img_work"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> <div class="bg"></div> <figure class="img_work abs1"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> </div> <div class="novoros_work blcok"> <p>текст примера</p> <div class="bg"></div> <figure class="img_work"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> <div class="bg"></div> <figure class="img_work abs"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> </div> <div class="krd_work blcok"> <p>текст примера</p> <div class="bg"></div> <figure class="img_work"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> <div class="bg"></div> <figure class="img_work abs1"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> </div> <div class="tuapse_work blcok"> <p>текст примера</p> <div class="bg"></div> <figure class="img_work"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> <div class="bg"></div> <figure class="img_work abs"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" style="max-width: 100%; height: auto;" /> </figure> </div> </section>

but you need to do this:

enter image description here

Explain to me please, how best to implement this opportunity? I have already tried a lot of things ...

  • And what's the problem with the location of the blocks? jsfiddle.net/qtn9un31 - soledar10
  • @ soledar10, you did not understand, you need to place in front of the orange blocks .. - Genexys
  • jsfiddle.net/vkpufL7a - right? - soledar10
  • @ soledar10 what you need! thank you I will study) thanks a lot) - Genexys
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

3 answers 3

Most likely, do not use the rear unit. Instead, use box-shadow.

    Thanks big @ soledar10

     * { padding: 0; margin: 0; box-sizing: border-box; } img { max-width: 100%; } .works { font-family: sans-serif; padding: 50px 10px; width: 960px; margin: 0 auto; } .works h2 { text-align: center; margin-bottom: 25px; } .list-works { text-align: center; } .list-works > li, .works-item { display: inline-block; *display: inline; zoom: 1; vertical-align: top; width: 46%; margin: 0 2%; position: relative; } .list-works > li { margin: 25px 2%; } .works-item img { display: block; border: 1px solid #222; /* box-shadow: -10px -10px #FF9F18;*/ } .img1 { position: relative; z-index: 1; } .works-item p { margin: 10px 0; } .img2 { position: absolute; top: -10px; left: -10px; } 
     <div class="works"> <h2>WORKS</h2> <ul class="list-works"> <li> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>Before</p> </figure> <!-- --> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>After</p> </figure> <li> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>Before</p> </figure> <!-- --> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>After</p> </figure> <li> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>Before</p> </figure> <!-- --> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img2" /> <p>After</p> </figure> <li> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>Before</p> </figure> <!-- --> <figure class="works-item"> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" class="img1" /> <img src="http://img.liveinternet.ru/images/attach/4/18002/18002743_crying_baby2.jpg" alt="" class="img2" /> <p>After</p> </figure> </ul> </div>

    jsfiddle

    • It is not the answer to the question. To leave comments or ask the author to clarify a question, leave a comment on the question, you can leave any number of comments under your message, and when your reputation reaches the required level, you can comment on any user posts . - Athari
    • @Athari, how is it not, if what I need? or something I do not understand? - Genexys
    • After the correction is more similar to the answer. But the explanations are still zero. - Athari

    Using positioning and z-index (if needed), or using a shadow. Answered "in general", because the answers have already been written)

    • If you write the answer, then write a normal answer with analysis and examples, and not a single reply in one line. Especially, if other answers are more meaningful. - Athari