I would like to work with this:
img {
width: 200px;
height: 300px;
object-fit: contain;
box-shadow: 0 0 30px red, 0 0 30px red;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg">
</div>
But the box-shadow
should be directly on the image and not at the border of the image container. I have tried it with drop-shadow()
, but then I can't add the effect twice. Is there any other way to fix that?
CodePudding user response:
try this:
img {
width: 200px;
height: 300px;
object-fit: contain;
filter: drop-shadow(0 0 30px red) drop-shadow(0 0 30px red);
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg">
</div>
You can add multiple filters but you must add them one by one. To use drop-shadow multiple times, you have to add each shadow at its own drop-shadow.
CodePudding user response:
I think this is what you need
body{
display: grid;
place-content: center;
position: relative;
}
.container{
width: 220px;
height: 300px;
display: flex;
justify-items: center;
align-items: center;
border: 1px solid blue;
}
img {
width: 220px;
height: 147px;
object-fit: cover;
box-shadow: 0 0 30px red, 0 0 30px red;
}
<div >
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg"
/>
</div>
CodePudding user response:
Could try something like this also.
.wrapper>div {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg');
height: 150px;
width: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0 0 30px red, 0 0 30px red;
}
.wrapper {
padding: 40px 0;
outline: dotted black 1px;
width: fit-content
}
<div >
<div></div>
</div>