html - Div height animation direction issue from bottom -


i'm working on text fill animation using :after element on top of text , animate height of make fill animation.

it's working position absolute , top 0 on :after element. if want make same animation of height in oposite direction bottom top, should change top 0 bottom 0.

that's issue appear, :after element goes under text block ?

here code : https://codepen.io/1conu59/pen/zdvxop

.text {     font-family: 'montserrat', sans-serif;     font-size: 12em;     font-weight: 700;     position: relative;     display: inline-block;     background-color: black;     color: #fff;   }    .text:after {     transition: 1s ease;     content: attr(data-content);     display: block;     position: absolute;     top: 0;     left: 0;     right: 0;     color: black;     width: 100%;     height: 0%;     overflow: hidden;     *background-color: black;     z-index: 1000;   }    .text:hover:after {     height: 100%;     border-radius: 0px;   }
<div class="text" data-content="grandioso">    	grandioso    </div>

try changing top 0 bottom 0 .text:after , see issue

thanks !

edit : if closely there's issue kind of browser glitch think. 0.5 px line around text when animation complete , appear when animate 0% 100% not 100% 0%. have idea how fix ? use text shadow result not great...

check below snippet answer. changed height property animate 100% 0% , changed default color , after color after takes 100% height. hope helps.

.text {    font-family: 'montserrat', sans-serif;    font-size: 12em;    font-weight: 700;    position: relative;    display: inline-block;    color:#39a966;  }    .text:after {    transition: 1s ease;    content: attr(data-content);    display: block;    position: absolute;    top: 0;    left: 0;    right: 0;    color: #000;    width: 100%;    height: 100%;    overflow: hidden;    *background-color: black;    z-index: 1000;  }    .text:hover:after {    height: 0%;    border-radius: 0px;  }
<div class="text" data-content="grandioso">      grandioso    </div>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -