css - How to position half of image out of the div responsive -
i position icons red square is. have tried position: relative , position absolute dont understand why not working.
<div class="col-xs-12 col-sm-4"> <div class="wrap"> <img class="blockico" src="<?php bloginfo('template_url'); ?>/img/icons/catering150.png"> <h4>catering</h4> <a href="url">the menu</a> <br> <a href="url">today's menu</a> <br> <a href="url">gallery</a> <br> <a href="url">festivities</a> <br> </div> </div> .wrap { position:relative; width: 100%; height: 100%; background-color: #e9e9e9;} .blockico { position:absolute; top:-50%;}
not sure why isn't working you; plugged fiddle , (while doesn't behave way think you'd want) seems move image fine. here's fiddle of different approach (not using position attributes; applying negative top margin) might closer.
https://jsfiddle.net/35aohm3y/
.wrap { margin-top:50px; /* push wrap down bit. might not need */ width: 100%; height: 100%; background-color: #e9e9e9;} .blockico { background:#666; /* added demonstration purposes */ margin-top:-50px; /* , push image bit */ } 
Comments
Post a Comment