How can I hide text during off hover when using CSS transition and transform?

I'm trying to use -webkit-transform and -webkit-transition on hover to ease a span with text up to overlay an image.

What I want to do is have the span .caption hidden - until hovering on the camera SVG - until it transitions up to overlay the image. Is this possible? With only CSS and not using jQuery?

Do I need z-index on the .caption to ease it into visibility?

Have this right now off hover:

Need to look like this off hover:

Ease up like this on hover:

Codepen: https://codepen.io/giddytab/pen/XQarpg

CSS:

.photographer_caption{
position:absolute;
bottom:0;
left:15px;
z-index:100;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
border-radius:2px;
color:#fff;
}
    
.photographer_caption svg{
background:#143c48;
padding:6px;
width:35px;
height:28px;
margin-bottom:10px;
}
    
.photographer_caption .caption,.photographer_caption a,.photographer_caption span.photographer_name{
-webkit-transform:translateY(100%);
-webkit-transition:.25s ease;
transition:.25s ease;
background:#143c48; 
margin-bottom:-20px
}
    
.photographer_caption:hover .caption,.photographer_caption:hover a,.photographer_caption:hover span.photographer_name{
-webkit-transform:translateY(0);
transform:translateY(0)
}

HTML:

<div style="position:relative" class="figure">
<img class="figure-image" src="https://placecats.com/poppy/300/200" alt="">
    <div class="photographer_caption"><svg xmlns="http://www.w3.org/2000/svg" width="16.758" height="14.364" viewbox="0 0 16.758 14.364">
<path id="Path_15460" data-name="Path 15460" d="M27.386,26l-.9,2.394H24.394A2.389,2.389,0,0,0,22,30.788V37.97a2.389,2.389,0,0,0,2.394,2.394h11.97a2.389,2.389,0,0,0,2.394-2.394V30.788a2.389,2.389,0,0,0-2.394-2.394H34.269L33.371,26Zm2.992,4.189a4.189,4.189,0,1,1-4.189,4.189A4.2,4.2,0,0,1,30.379,30.189Zm0,1.8a2.394,2.394,0,1,0,2.394,2.394A2.38,2.38,0,0,0,30.379,31.985Z" transform="translate(-22 -26)" fill="#fff"/></svg>
<span class="caption">Caption Caption</div>
</span>
</div>

Answer

overflow:hidden on your .figure class will get you most of the way.

Then it's just a matter of some minor margin tweaking.

.photographer_caption {
  position: absolute;
  bottom: 0;
  left: 15px;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 2px;
  color: #fff;
}

.photographer_caption svg {
  background: #143c48;
  padding: 6px;
  width: 35px;
  height: 28px;
  margin-bottom: 10px;
}

.photographer_caption .caption,
.photographer_caption a,
.photographer_caption span.photographer_name {
  -webkit-transform: translateY(100%);
  -webkit-transition: .25s ease;
  transition: .25s ease;
  background: #143c48;
  margin-bottom: -25px
}

.photographer_caption:hover .caption,
.photographer_caption:hover a,
.photographer_caption:hover span.photographer_name {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

.figure {
  overflow: hidden
}

.figure-image {
  display: block;
}

<div style="position:relative" class="figure">
  <img class="figure-image" src="https://placecats.com/poppy/300/200" alt="">
  <div class="photographer_caption"><svg xmlns="http://www.w3.org/2000/svg" width="16.758" height="14.364" viewbox="0 0 16.758 14.364">
<path id="Path_15460" data-name="Path 15460" d="M27.386,26l-.9,2.394H24.394A2.389,2.389,0,0,0,22,30.788V37.97a2.389,2.389,0,0,0,2.394,2.394h11.97a2.389,2.389,0,0,0,2.394-2.394V30.788a2.389,2.389,0,0,0-2.394-2.394H34.269L33.371,26Zm2.992,4.189a4.189,4.189,0,1,1-4.189,4.189A4.2,4.2,0,0,1,30.379,30.189Zm0,1.8a2.394,2.394,0,1,0,2.394,2.394A2.38,2.38,0,0,0,30.379,31.985Z" transform="translate(-22 -26)" fill="#fff"/></svg>
    <span class="caption">Caption Caption</div>
</span>
  </div>