How to make bordered square with text and image over it in CSS

Question

I would like to reproduce the effect of the slider on this site: http://www.energeticthemes.com/templates/kaam/index.html

I wanted to make it responsive, so when it goes under the tablet dimension (sm on bootstrap) it must hidden and keep only the image. I tried making a bordered square with css:

.square-on-image{
border:solid 5px #fff;
width:300px;
height:350px;
}

And called it on HTML like a div:

<div class="square-on-image"><img src="img/demoimg1.png" alt=""> DEMO </div>

But it doesn't work because the image and the text don't go over the square, they go into it. I tried using z-index but that type of solution compromise all the layout. Also I can't put the square on the center of the slider. I'm using swiper slider and until now it has never given trouble inserting centered objects.

Thanks to @jbutler483 and @imvain2 i've made this edit on the code:

CSS:

.bordered-image{
   position: relative;
   height: 600px;
   left: 20%;
   width: 60%;
   border: 20px solid #fff;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
   text-align: left;
}

.bordered-image img{
  position: absolute;
  top: 15%;
  width: 350px;
  height: 450px;
  left: 50%;
}

HTML:

<div class="banner-max-width">
 <div class="text-animation">
  <div class="hidden-sm"><div class="bordered-image">
    <img src="http://placehold.it/350x150"> 
     <div class="slide-title h2 light fixed" data-swiper-parallax="-800">DEMO TITLE</div>
       <div class="slide-description simple-article large light transparent" data-swiper-parallax="-400">DFSADFSDFSGFDFDSDGFBSBGBSDGFBSGDFB</div>
         <h2>A Movie in the Park:<br/>Kung Fu Panda</h2>
       </div>
     </div>
   </div>
  </div>
 </div>

It appears to be working but now there are two new problem:

I added the image and the text into the first div, so the " <div class="hidden-sm"> " hide every object when resized. But I want that only the square go away giving me a template with title above and image in the center.

I wanted the text aligned on the left like the image (over the square) but i can't do it. I think that is a CSS problem because they stay aligned on the left but inside the square

Answer 1

here is a working sample.

 .bordered-image{ border:15px solid #000000; height:250px; } .bordered-image img{ position:absolute; right:12px; top:15%; } 

 <div class="hidden-sm"><div class="bordered-image"><img src="http://placehold.it/350x150"> DEMO</div></div> 

Answer 2

You can use positioning for this. quick demo can be seen below, where I have set an image tag inside of a div wrapper.

 div { position: relative; height: 400px; width: 30%; border: 10px solid gray; } div img { position: absolute; top: 10%; width: 300px; left: 50%; height: 80%; } 

 <div> <img src="http://lorempixel.com/300/300" /> </div>