html - Text hidden by 'before' css element -
i'm trying replicate saw on site, before element hiding text. there can fix it?
this example:
body {margin: 20px;} { padding: 120px; position: relative; color: white; overflow: hidden; display: inline-block; font-size: 16px; } #hello:before { background-color: #4541f1; position: absolute; top: 0; content: ""; left: 0; right: 0; bottom: 0; } #hello:hover::before { transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; transform: perspective(100px) translatez(-50px); }
<a href="#" id="hello">test</a>
add negative z-index
push layer below "parent".
body { margin: 20px; } { padding: 120px; position: relative; color: white; overflow: hidden; display: inline-block; font-size: 16px; } #hello:before { background-color: #4541f1; position: absolute; top: 0; content: ""; left: 0; right: 0; bottom: 0; z-index: -1; /* here */ } #hello:hover::before { transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; transform: perspective(100px) translatez(-50px); }
<a href="#" id="hello">test</a>
Comments
Post a Comment