CODEWITHSUNDEEP
cssreact-nativematerial-ui
DJ_cascurity
DJ_cascurity

Reputation: 57

water drop image affect react

good afternoon everyone, due to the css room being empty i come here to ask you for support in relation to the css, i'm trying to make a water drop effect, but so far i haven't been able to do that ... will it be possible to show me the right way? I already tested SVG shape element and Clip Path (Mask) CSS, but I couldn't get the format ... the idea would be to apply this effect to an image ... evry time i implemente the css the image rotates: https://ibb.co/J3sVQyn

this is the code i'm using css and react call:

.CardComponent-media-4 {
    width: 145px;
    height: 169px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    flex-basis: 20%;
    z-index: 50;  
    border-radius: 50%; 
    border-top: 145/2 ;
    border-left: 145/2;
    border-bottom: 145/2;
    border-left: 145/2;
    border-top-right-radius: 0;
    transform: rotate(45deg);
}
<CardMedia image={imageUrl} title={title} className={classes.media} />

Upvotes: 0

Views: 537

Answers (1)

Temani Afif
Temani Afif

Reputation: 273750

You are almost good, simply make the image rotate in the opposite direction by considering another element:

.box {
  width:150px;
  height:150px;
  position:relative;
  border-radius:50% 0 50% 50%;
  margin:50px;
  transform:rotate(-45deg);
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  top:-20%;
  left:-20%;
  right:-20%;
  bottom:-20%;
  background: center/cover;
  background-image:inherit;
  transform:rotate(45deg);
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>

Another idea using mask:

img {
  width: 175px;
  height: 200px;
  -webkit-mask:
    linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
    linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
    radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
    linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
    radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
  mask-repeat:no-repeat;
}
<img src="https://i.picsum.photos/id/1074/800/914.jpg" >

Upvotes: 3

Related Questions