Overlay image into another div

Question

if you could take a look for a moment at http://www.acehbus.com , you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st . I have tried z-index but it doesn't work. Thanks you for your help.

Answer 1

First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:

<div class="iphone"></div>

.iphone {
    bottom: -100px;
    position: relative;
}

Look, I made some experiments and made this fiddle

Answer 2

I got through your site, and I have two things:

1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.

2) You use the image as itself. Use div instead and give image as its background. See this fiddle: https://jsfiddle.net/8xhucpx8/

div.image{
  width:300px; 
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center; 
background-size:100% auto;    
background-repeat:no-repeat;}

Answer 3

You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6 . So do something like.

 .col-md-6 { height: 155px; overflow: hidden; } 

 <div class="col-md-6"> <img src="http://www.acehbus.com/img/search.png" alt="" width="200px" /> </div>