give background shadow for text present on image - html

Question

we have images in our site as below
at the bottom of the image we are displaying text , we want to give background shadow for that text as below :
.fanbook-img img {
width: 100% !important;
}
img {
display: block;
}
, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

Answer 1

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 ;
}

Answer 2

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

Answer 3

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.

Answer 4

<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;
}