CSS: on hover body copy should expand up and over the image

Question

Card has image, button and body copy. Image and button should be visible all the time. hover state on card: button and body copy should expand up and over the image.

// They don't necessarily need to take props
// This one also has an explicit return
const App = () => {
     return (
<div className="card">
  <img        src="https://st.depositphotos.com/1203257/1763/i/950/depositphotos_17639207-    stock-photo-great-plains-journey.jpg" alt="Avatar" style={{width:"100%"}} />
    <div className="container">
      <button type="button"> view all </button>
      <p>Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer Architect Engineer </p> 
    </div>
</div>
    )
}

ReactDOM.render(<App />,
document.getElementById("root"))

.card {
  box-shadow: 10px 4px 8px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 200px;
  margin: 20px;
  height: 100%;
  background-color: pink;
  &:hover{
  box-shadow: 10px 4px 8px 10px rgba(0, 0, 0, 0.2);
    .container{
  transform: translateY(0%);
    }
}
}

.container {
  position: absolute;
  // padding: 2px 16px;
  // position: absolute;
  transition: transform 1s ease;
  transform: translateY(80%);
}