How can I hide text during off hover when using CSS transition and transform?
typescript
Ethan JacksonI'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>