Cara buat button di dalam image/gambar/foto di css


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 Cara buat button di dalam image/gambar/foto di css Reviewed by Syawaluddin Amin, S.Kom on September 15, 2016 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.