nsdlfefinedieicbe nsdlfefinedieicbe - 5 months ago 13
CSS Question

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

Answer

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.

Comments