.xcontainer {
    font-size: 0;
    width: 100%;
    margin-top: 0px;
    text-align: center;
  }
  
  .xcard {
    overflow: hidden;
    position: relative;
    display: inline-block;
    height: 600px;
    width: 33%;
   
    /*
    Each "card" is set to 600x400px because that is the size of  the image, adjust as needed. Make sure the overflow is set to hidden or else when the img scales it will clip with the other images.
    */
  }
  
  .ximg-container1 {
    transition: transform .1s ease;
    background: #006699;
  }
  .ximg-container2 {
    transition: transform .1s ease;
    background: #A9ABAD;
  }
  
  .ximg-container3 {
    transition: transform .1s ease;
    background: #8CD50B;
  }
  
  
  .ximg-container1:hover, .ximg-container2:hover, .ximg-container3:hover {
    transform: scale(1.1);
    /*
    Change the scale value as much as you want to change the amount of zoom on hover.
    */
  }
  
  .xcard img {
    opacity: .5;
    transform: translate(0,0);
    /*
    Change the opacity value to change how "faded" you want the image to appear when it is not hovered.
    */
    transition: opacity .25s ease-in-out;
  }
  
  .xcard img:hover {
    opacity: 1;
  }