cssoverflowfadefading

Css overflow hidden div fading


This is something that i want to achieve.

thing similar to this *but this is fading by using color.

<div class="something"> <div class="inside"> <p>Long wordingggggggggggggggggggggggggggggggggggg</p> </div> </div>

.something { overflow:hidden; width: 100px; }

I wanna make the div opacity fading , instead of the color . Is is possible?


Solution

  • .wrapper{
    background: orange;
    }
    .big-font{
    font-size: 25px;
    }
    .fade-right {
    background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    .fade-left {
    background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    .fade-up {
    background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    .fade-down {
    background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
                
    <div class="wrapper">
    <p class="big-font fade-right">Long wordingggggggggggggggggggggggggggggggggggg</p>
    <p class="big-font fade-left">Long wordingggggggggggggggggggggggggggggggggggg</p>
    <p class="big-font fade-up">Long wordingggggggggggggggggggggggggggggggggggg</p>
    <p class="big-font fade-down">Long wordingggggggggggggggggggggggggggggggggggg</p>
    </div>