JSFiddle - React, Tailwind, and code Playground

by prasadau1989

HTML

<div class="mult-image-animation">
  <div class="card">
				<div class="card-img">
                    <div>
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNrrxhV47sWmLxbNjuHyk1UyjfmKA5EiSn4A&usqp=CAU" alt="">
                    </div>
                    <div>
                        <img src="https://cdn0.iconfinder.com/data/icons/finance-and-business-solid-new/520/Business_finance_solid-23-512.png" alt="">
                    </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%
    }