JSFiddle - React, Tailwind, and code Playground

by prasadau1989

HTML

<div class="mult-image-animation">
  <div class="card">
				<div class="card-img">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.96 21.5"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M24.35,16.29c-2.08.36-3.82-1-4.24-3.39-.24-1.46.52-2.38.23-3.9s-1.27-2.12-1.55-3.58c-.41-2.36.75-4.27,2.83-4.63C27.82-.09,31.37,14.4,24.35,16.29Z"/><path class="cls-1" d="M7.34.79c2.08.36,3.25,2.27,2.83,4.63C9.89,6.88,8.87,7.48,8.62,9s.47,2.44.23,3.9c-.42,2.36-2.16,3.75-4.24,3.39C-2.41,14.4,1.14-.09,7.34.79Z"/><path class="cls-1" d="M8.65,8.83a5,5,0,0,1,4,4.88v7"/><path class="cls-1" d="M20.31,8.83a5,5,0,0,0-4,4.88v7"/></g></g></svg>
                    </div>
                    <div>
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.67 44.27"><defs><style>.cls-1{fill:none;stroke:#ea1010;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M50.2,33.56c-4.29.75-7.89-2.12-8.75-7-.49-3,1.07-4.91.48-8s-2.63-4.39-3.2-7.39c-.86-4.87,1.54-8.8,5.83-9.56C57.36-.23,64.69,29.67,50.2,33.56Z"/><path class="cls-1" d="M15.1,1.58c4.3.76,6.69,4.69,5.84,9.56-.57,3-2.68,4.24-3.2,7.39s1,5,.47,8c-.85,4.87-4.45,7.74-8.75,7C-5,29.67,2.3-.23,15.1,1.58Z"/><path class="cls-1" d="M17.8,18.18A10.29,10.29,0,0,1,26,28.24V42.77"/><path class="cls-1" d="M41.87,18.18a10.29,10.29,0,0,0-8.2,10.06V42.77"/></g></g></svg>
                    </div>
				</div>
				<div class="card-body">
					<div class="content-selector-wrapper">
						<paragraph>
                            <p><strong>Renal manifestations</strong> can progress to kidney failure.</p>
                        </paragraph>
					</div>
				</div>
			</div>
</div>

CSS

.mult-image-animation {
  text-align: center; }
  .mult-image-animation .card-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 35px;
    position: relative;
    margin-left: auto;
    margin-right: auto; }
    .mult-image-animation .card-img > div {
      position: absolute;
      width: 150px;
      height: 150px;
      margin-left: auto;
      margin-right: auto;
      padding: 40px 30px;
      max-width: 100%;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      height: 150px;
      -webkit-transition: all ease 3s;
      -moz-transition: all ease 3s;
      transition: all ease 3s; }
    .mult-image-animation .card-img div:first-child {
      z-index: 1; }
  .mult-image-animation .card-body {
    padding: 0;
    font-size: 18px;
    color: #4D4D4F;
    font-family: "Merriweather", Helvetica, Arial, sans-serif; }
    .mult-image-animation .card-body strong {
      font-family: "Merriweather-Bold", Helvetica, Arial, sans-serif; }
  .mult-image-animation:hover .card-img div:last-child {
    box-shadow: inset 0 -150px 0 0 #EA1010;
    z-index: 5; }
    img{
      max-width:100%
    }