Create Underline Transition CSS - html

Question

I want to make a header appear to have an animated underline when the parent element is hovered. Right now it is very close but I can't seem to position it correctly so that its width grows in both directions from its center, which is what I want it to do. Does someone know what I'm missing or need to add to my code to make this happen? The code below is what I think is relevant to fixing the situation. The entire project can be viewed via this CodePen as well. Thanks in advance! (The underlining is only applied to the first header when hovering).
HTML:
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline"></div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
<div class="image-block">
<h3>Swallow Tail</h3>
<img class="flex-image" src="https://source.unsplash.com/U--hvQ5MKjY">
</div>
<div class="image-block">
<h3>Directional</h3>
<img class="flex-image" src="https://source.unsplash.com/F3ePNdQb_Lg">
</div>
</div>
CSS:
.image-block:hover > h3{
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 10px;
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
Edit:
I am trying to use the same ideas from someone else's Underlining Effect CodePen. The biggest difference is I don't want to have an <a> inside my header.

Answer 1

If you apply width: 100% to the .underline rule it begins the animation from the center.
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%; /**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
Adjusting the width of the line
To adjust the width of the line you can change the following:
.underline{
margin: 10% /*<== Set to half of 'what's left' in this case half of 20% is 10%*/
width: 80%;
}
.image-block:hover .underline {
width: 80% /*<== Set to match the .underline width */
}
* {
box-sizing: border-box;
}
.row {
min-width: 100%;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.image-block {
position: relative;
width: 33.33%;
float: left;
margin-top: 0;
z-index: 5;
}
.image-block:hover {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.image-block h3 {
position: absolute;
text-align: center;
font-family: 'Roboto', sans-serif;
color: white;
top: 40%;
width: 100%;
font-size: 48px;
letter-spacing: 5px;
margin: 0;
transition: all .3s ease-in-out;
}
.image-block:hover>h3 {
letter-spacing: 8px;
transition: all .3s ease-in-out;
}
.underline {
visibility: hidden;
background-position: center;
background-color: white;
position: absolute;
top: 60%;
margin: 0;
width: 100%;
/**** Change this to 100% ****/
height: 10px;
border-radius: 5px;
transform: scaleX(0);
webkit-transition: all .2s ease-in-out;
transition: all .3s ease-in-out;
}
.image-block:hover .underline {
visibility: visible;
transform: scaleX(1);
width: 100%;
height: 10px;
transition: all .3s ease-in-out;
}
.flex-image {
width: 100%;
height: auto;
display: flex;
}
#media all and (max-width: 1200px) {
.image-block {
width: 33.33%%;
}
}
#media all and (max-width: 1660px) {
.navbar a {
padding: 14px 14%;
}
}
#media all and (max-width: 1035px) {
.navbar a {
padding: 14px 12%;
}
}
#media all and (max-width: 880px) {
#top-image {
margin-top: 150px;
}
.image-block {
width: 100%;
margin: 0;
}
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar a:hover {
transform: scale(1);
}
}
<div class="row flex-row">
<div id="top-image" class="image-block">
<h3>Fish Tail</h3>
<div class="underline">
</div>
<img class="flex-image" src="https://source.unsplash.com/KSHq0VSqLMA">
</div>
</div>