CODEWITHSUNDEEP
htmlcss
fresher
fresher

Reputation: 911

give background shadow for text present on image

we have images in our site as below

enter image description here

at the bottom of the image we are displaying text , we want to give background shadow for that text as below :

enter image description here

.fanbook-img img {
    width: 100% !important;
}

    img {
        display: block;
    }

    , *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

Upvotes: 1

Views: 126

Answers (4)

Kaizendae
Kaizendae

Reputation: 1053

HTML -

<div id="img"><div id="text"><p>text </p></div><div>

CSS-

#img{
background-image: url('');
}
#text{
background-color: rgba(?,?,?,0.5);
padding: 10px 10px;
margin: 0 ;
}

Upvotes: 3

iyyappan
iyyappan

Reputation: 777

    <div class="fanbook-img">
        <a href="http://sb.kidsdial.com/white-marble-2-samsung-galaxy-j7-phone-case.html">
           <div class="">texttext texttext texttext texttext texttext texttext</div>
            <img style="width:250px;height:250px;text-align:center;" src="http://sb.kidsdial.com/media/FanBook/iQdzXDrvEU.jpg">
</a>
 </div>

    .fanbook-img > a {
        position: relative;
        width: 100%;
    }
    .fanbook-img div {
        background-color: rgba(0, 0, 0, 0.5);
        bottom: 0;
        color: #ffffff;
        height: auto;
        left: 0;
        margin: 0 auto;
        padding: 10px;
        position: absolute;
        right: 0;
        text-align: center;
        width: 100%;
        z-index: 99;
    }

Upvotes: 1

henry
henry

Reputation: 4385

The text and whole thing needs to be in some html element, for example the HTML

<p>text</p>

which will then get the CSS

p {
    display: block;
    padding: [vertical padding] [horizontal padding];
    background: [background color, in rgba];
}

The display: block makes it full-width and makes it take padding. Just to give you an example of working CSS, here are so sample values:

p {
    display: block;
    padding: 20px 40px;
    background: rgba(255,255,255,.5);
}

The background is an rgba ("red green blue alpha") value in order to give you transparency. Hex values, the other common way of writing colors for the web (they look like "#ff00ff"), don't support transparency. r, g, and b are 0 (none) to 255 (full), and a is 0 (transparent) to 1 (opaque); the example is half-opaque white (rgba(0,0,0,.5) would be half-opaque black).

Note that the p in p {...} in the CSS is targeting the <p>..</p> in the HTML - if you were wrapping the text in some other element, you'd use that in the CSS instead. Targeting a "bare" selector can be risky, because those styles will apply to every instance of it. To be safer, can also target a class or id, instead of the element name. For example

HTML

    <p class="text-with-transparent-background">
        text
    </p>

CSS

    .text-with-transparent-background {
        ...(styles as above)...
    }

A class can be reused multiple times on a single page. An id (HTML <elementname id="yourcustomidname">...</elementname>, CSS #yourcustomidname {...styles...}) can only be used once per page

Upvotes: 2

Mukul Kant
Mukul Kant

Reputation: 7122

You need to make some changes in your css. See teh below css code .

.fanbook-name {
    background: rgba(255, 255, 255, 0.5); /* add this */
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}
.fanbook-name b {
    /* bottom: 25px; */
    color: #000;
    font-size: 12px;
    /* position: relative; */
    text-transform: capitalize;
}

.fanbook-image li {
    float: left;
    margin-bottom: 1%; /* change this */
    margin-left: 0.5%;
    margin-right: 0.5%;
    position: relative; /* add this */
    width: 24%;
}

I hope it will helps you.

Upvotes: 1

Related Questions