1
Good morning, in a project that I’m developing it has a kind of "shadow" to leave a white text more visible inside the image, the problem is that I’ve tried both Text-Shadow and Box-Shadow in the text div but it does not have the expected result, Text managed to put a shadow but a shadow not so highlighted. I would like a help on how to proceed, here is the image of Wireframe of the site, HTML, and CSS.
.item-segmento {
text-align: center;
margin: 25px 0;
overflow: hidden;
}
.item-segmento span {
transition: all .5s ease;
color: #FFF;
font-size: 18px;
text-transform: uppercase;
text-shadow: 0px 0px 20px #000000;
}
.img-segmento {
height: 300px;
margin-bottom: 10px;
position: relative;
}
.img-segmento>img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 100%;
}
.img-segmento .segmento-titulo {
transition: all .5s ease;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
display: table;
color: #FFF;
}
.item-segmento .segmento-titulo>div {
color: #FFF;
vertical-align: middle;
display: table-cell;
}
<div class="item-segmento col-xs-12 col-sm-6 col-md-4">
<a href="segmento.php?id=1">
<div class="img-segmento">
<img src="https://picsum.photos/200/300" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<div class="segmento-titulo">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
</a>
</div>
Alex has you edit the question and put an image of how you would like it to look? Because it seems the text-shadow is already working, I just did not understand the effect you want.
– hugocsl
Anderson the way I want it to stay, it’s just like what’s in Wireframe.
– Alex Borgmann