CSS Animation with different image based on the background

Question

I am using CSS animation to show different images based on the background color but the image position should not be changed and the background color animation should happen from bottom to top has the background color fill I should able to see the respective image for that particular background color on hover.

HTML

div class="card">
  
    
        
    
    
        
    
  
  
    
      
        Renal manifestations can progress to kidney failure.

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.trigger-animation .card-img div:last-child {
    box-shadow           : inset 0 -70px 0 0 #EA1010;
    z-index              : 5;
    }

I am able to get the animation and the background image but has I hover it's hiding the previous image but I want the previous image to hide as the transition completes. Where i should be able to see both outline and solid image like this

JS Fiddle Image https://jsfiddle.net/prasadau1989/m9abLo4f/ Is there a way for me to achieve this in SVG? https://jsfiddle.net/prasadau1989/m9abLo4f/1/

Any guide is highly appreciated.

user_3824249 · Answer

You're actually pretty close, and SVG was a great idea! Using SVG makes it easy to swap the fill color on an element however you want depending on the context.

Essentially, you want to create the same element twice with inverted colors, but don't mess with z-index at all. Instead, create a clip-path for the hover-state, already set to be fully clipped from the top:

.mult-image-animation .card-img > div:last-child {
    clip-path: inset(100% 0% 0% 0%);
}

Then on hover, set that 100% value back to 0% to create the animation where it appears the animation starts at the bottom as you described.

Here it is, all put together:

:root {
    --static-color: #fff;
    --accent-color: #ea1010;
}

.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;
    box-shadow: inset 0 0 0 4px var(--accent-color);
}

.mult-image-animation .card-img > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 15px;
    transition: all 0.5s ease-out;
    box-sizing: border-box;
    overflow: hidden;
    z-index: -1;
}

.mult-image-animation .card-img > div:first-child {
    background-color: var(--static-color);
}

.mult-image-animation .card-img > div:first-child > svg {
    fill: var(--accent-color);
}

.mult-image-animation .card-img > div:last-child {
    background-color: var(--accent-color);
    -webkit-clip-path: inset(100% 0% 0% 0%);
            clip-path: inset(100% 0% 0% 0%);
}

.mult-image-animation .card-img > div:last-child > svg {
    fill: var(--static-color);
}

.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 {
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
}

img {
    max-width: 100%;
}


    
        
            
                
            
            
                
            
        
        
            
                
                    Renal manifestations can progress to kidney failure.

I hope this helps! Feel free to ask me any follow-up questions in the comments. Cheers!

CSS Animation with different image based on the background

1 Answers