html - Text positioning in div -

I have to put a zoom picture on my image, and I have tried a lot of ways, but I can not understand it Outside, please help me ...

Image "lupe" should be at the top of the image "boy"

It should look like this:

HTML:

  & lt; Div class = "section 4" & gt; & Lt; Div class = "content4" & gt; & Lt; P & gt; & Lt; Span style = "font-size: 30px; color: # fdd400" & gt; Nives & lt; / Span & gt; & Lt; / P & gt; & Lt; Img style = "width = 34px; height: 34px;" Src = "picture / lupe.png" /> & Lt; Div class = "pic 1" & gt; & Lt; Img src = "picture / div4-boy.png" /> & Lt; Div class = "text1" & gt; & Lt; P & gt; & Lt; Span style = "font-size: 30px; color: # fdd400; float: left; margin-top: -2%;" & Gt; Loram advertising & lt; / Span & gt; & Lt; / P & gt; & Lt; Br> & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; May 12, 2014 | In the game & lt; / Span & gt; & Lt; / P & gt; & Lt; Br> & Lt; Br> & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; Domestic ad server amit, public adipiscing elite, & lt; / Span & gt; & Lt; / P & gt; & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; ASD AUSMODT Works and Labor and Litter & lt; / Span & gt; & Lt; / P & gt; & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; Magna Alicia Shooter Game [...] & lt; / Span & gt; & Lt; / P & gt; & Lt; Br> & Lt; Br> & Lt; Br> & Lt; A href = "#" & gt; & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: # fdd400; float: correct" & gt; Lease Mare & gt; & Lt; / Span & gt; & Lt; / P & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "photo 2" & gt; & Lt; Img src = "picture / div4-girl.png" / & gt; & Lt; Div class = "text2" & gt; & Lt; P & gt; & Lt; Span style = "font-size: 30px; color: # fdd400; float: left; margin-top: -2%;" & Gt; Loram advertising & lt; / Span & gt; & Lt; / P & gt; & Lt; Br> & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; May 12, 2014 | Zwemmen & lt; / Span & gt; & Lt; / P & gt; & Lt; Br> & Lt; Br> & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; Domestic ad server amit, public adipiscing elite, & lt; / Span & gt; & Lt; / P & gt; & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; Asad AUSMOD Temple Youtube Labor & Dollar & lt; / Span & gt; & Lt; / P & gt; & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: white; float: left" & gt; Magna Alicia Shooter Game [...] & lt; / Span & gt; & Lt; / P & gt; & Lt; Br> & Lt; Br> & Lt; Br> & Lt; A href = "#" & gt; & Lt; P & gt; & Lt; Span style = "font-size: 14px; color: # fdd400; float: correct" & gt; Lease Mare & gt; & Lt; / Span & gt; & Lt; / P & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  .section4 {status: relative; Width: 100%; Height: 670px; Background color: # 222222; Background-shaped: 100% 100%; } .content4 {float: left; Width: 100%; Height: 100%; } .content4p {status: relative; Text align: center; Margin-top: 2%; }. Image 1 {width: 100%; Height: auto; ; }. Image 1 IMG {margin-left: 15%; Width: 40%; Height: 50%; } .text1 {width: 27%; Height: 80 %%; float right; Margin-right: 17%; }. Picture 2 {Width: 100%; Height: 40%; Margin-top: 3%; }. Image 2 img {float: true; Margin-right: 17%; Width: 500px; Height: 252px; } .text2 {width: 27%; Height: 80 %%; Swim left; Margin-left: 15%; }  

You can try with:

  .inon {status: absolute; Left: 50%; Top: 50%; Bottom: Auto; Correct: auto; Webkit-transform: Translation X (-50%) Translation Y (-50%); -MOZ-TRANSFORM: Translator X (-50%) Translation Y (-50%); -MMS-Transform: Translator X (-50%) Translation Y (-50%); -o-conversion: translate X (-50%) translate Y (-50%); Conversions: Translator X (-50%) Translation Y (-50%); Width: 100%; Text align: center; }