locked
display text over image RRS feed

  • Question

  • User-1634604574 posted

    i have this code i want to display each text over an image 

    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/account_2.png")"  style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><div  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Account</div>
                </div>
    
            </div>
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/buying_2.png")"   style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><div  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Buying</div>
                </div>
    
            </div>
    
    
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/selling_2.png")"  id="img_selling" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><span  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Selling</span>
                </div>
    
            </div>
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/stock_2.png")"  id="img_stock" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><span  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Stock</span>
                </div>
    
            </div>
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/healthcare_2.png")"  id="img_healthcare" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><span  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Healthcare</span>
                </div>
    
            </div>
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                <div class="column ">
                    <img src="@Url.Content("~/img/hr_2.png")"  id="img_hr" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><span style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">human_resources</span>
                </div>
    
            </div>
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/manufacture_2.png")"  id="img_manufacture" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><span  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Manufacture</span>
                </div>
    
            </div>
    
            <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
                <div class="column ">
                    <img src="@Url.Content("~/img/setup_2.png")"  id="img_buying" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><span  style="padding-left:40px;padding-top:10px;cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569">Buying</span>
                </div>
    
            </div>
    
        </div>
        </div>

    Saturday, March 7, 2020 11:09 AM

All replies

  • User1535942433 posted

    Hi zhyanadil.it@gmail.com,

    Accroding to your desription,I suggest you could use background of text and the text will be written over each image.Besides, you could adjust the position of the font according to your requirments.

    More details,you could refer to below codes:

    <div class="container">   
                <div class="row">
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column">
                        @*<img id="image" src="@Url.Content("~/MyImages/image6.jpg")" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px"/>*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Account</div></div>
                    </div>
    
                </div>
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column">
                        @*<img id="image" src="@Url.Content("~/MyImages/image6.jpg")" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Buying</div></div>
                    </div>
    
                </div>
    
    
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column ">
                        @*<img src="@Url.Content("~/MyImages/image6.jpg")" id="img_selling" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Selling</div></div>
                    </div>
    
                </div>
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column ">
                        @*<img src="@Url.Content("~/MyImages/image6.jpg")" id="img_stock" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Stock</div></div>
                    </div>
    
                </div>
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column ">
                        @*<img src="@Url.Content("~/MyImages/image6.jpg")" id="img_healthcare" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Health</div></div>
                    </div>
    
                </div>
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column ">
                        @*<img src="@Url.Content("~/MyImages/image6.jpg")" id="img_hr" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">human</div></div>
                    </div>
    
                </div>
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column ">
                        @*<img src="@Url.Content("~/MyImages/image6.jpg")" id="img_manufacture" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Manu</div></div>
                    </div>
    
                </div>
    
                <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6">
                    <div class="column ">
                        @*<img src="@Url.Content("~/MyImages/image6.jpg")" id="img_buying" style="cursor:pointer;border:solid 1px lightgray;border-radius:5px;width:360px;height:60px" />*@
                        <div style="cursor:pointer;font-family:Calibri;font-size:18pt;color: #5f6569;background-image:url('../../MyImages/image6.jpg');background-size:360px 60px;width:360px;height:60px;"><div style="margin-left:280px;padding-top:30px;">Buying</div></div>
                    </div>
    
                </div>
    
            </div>

    Result:

    Best regards,

    Yijing Sun

    Monday, March 9, 2020 2:50 AM
  • User-1151440187 posted

    I have done that for only one image like :

    <div class="container">
    <div class="row">
    <div class="col-lg-4 col-sm-12 col-md-6 col-xl-6" >
    <div class="column ">
    <img src="@Url.Content("~/img/account_2.png")" style="; text-align: center; cursor: pointer; border: solid 1px lightgray;border-radius:5px;width:360px;height:60px" /><div style="; top: 5%; left: 5%; padding-left: 40px; padding-top: 10px; cursor: pointer; font-family: Calibri; font-size: 18pt; color: #5f6569">Account</div>
    </div>

    </div>

    </div>
    </div>

    You can adjust top and left property as you need.

     I hope this will help you.

    Friday, March 13, 2020 5:41 AM
  • User-2054057000 posted

    Displaying text over image is done mainly by using the property of CSS. You can read about it at https://www.w3schools.com/css/css_positioning.asp

    Example:

    <div id="">
     <image src="football.jpg"/>
     <span style="; padding-left: 10px; padding-top: 20px">football</span>
    </div>

    The above code will put "football" text over the image called football.jpg.

    Wednesday, March 18, 2020 10:32 AM