Learning Learning - 3 years ago 110
CSS Question

center align overlapping image in middle of another image

I want to show play button in center of the main image and want it to automatically align it self in center on different screen sizes.

Fiddle example

I tried different thing and sort of gave it up, i am not sure if i am using wrong structure or same thing can be done in easy and better way.

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
</div>
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff" />
</div>
<div class="video-details-wrapper"> <span>this is video title</span>

</div>
</div>
</div>

Answer Source

add css

.video-item-wrapper{  position: relative;}
.play-item-wrapper{position: absolute;top: 50%;  left: 50%;margin-left: -25px;
  margin-top: -25px;z-index: 9999;}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download