Assalamu'alaikum wr wb,
Kali ini saya akan share bagaimana caranya buat button di dalam image/gambar/foto di css.
Disini saya contohkan posisi button berada di kanan atas.
Berikut ini syntaxnya.
-----------------------------------------------
<style type="text/css">
#shop{
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
}
#shop .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
#shop .content a {
position:absolute;
top:5px;
right:5px;
background:blue;
color:#FFF;
}
</style>
<div id="shop">
<div class="content">
<img src="http://placehold.it/182x121"/>
<a href="#">Pangeran</a>
</div>
<div class="content">
<img src="http://placehold.it/182x121"/>
<a href="#">Pangeran</a>
</div>
<div class="content">
<img src="http://placehold.it/182x121"/>
<a href="#">Pangeran</a>
</div>
<div class="content">
<img src="http://placehold.it/182x121"/>
<a href="#">Pangeran</a>
</div>
</div>
-----------------------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/
Cara buat button di dalam image/gambar/foto di css
Reviewed by Syawaluddin Amin, S.Kom
on
September 15, 2016
Rating:
Tidak ada komentar: