javascriptcsssvg

Show only half of SVG


I'm showing my SVG image in the card

  <div class="card-image">
    <img src="/images/linux.svg" />
  </div>

I couldn't upload the SVG file here, but what I'd like to do is: (After an event is triggered)

Can someone point me to the right direction?


Solution

  • You can set a pseudo element on the container, and set a gradient to this pseudoelement that is transparent for half of it, a gray for the other half. The linear gradient can be set at the angle the you want

    .card-image {
        width: 200px;
        height: 300px;
        display: inline-block;
        position: relative;
    }
    
    .grayed:after {
        content: "";
        position: absolute;
        width: 100%; 
        height: 100%;
        left: 0;
        z-index: 9;
        background-image: linear-gradient(110deg, transparent 50%, #888a 50%);
    
    }
    <div class="card-image">
        <img src="https://dummyimage.com/200/300/ff00ff" />
    </div>
    <div class="card-image grayed">
        <img src="http://placekitten.com/200/300/808080" />
    </div>

    .card-image {
        width: 600px;
        height: 400px;
        display: inline-block;
        position: relative;
        overflow: hidden;
    }
    
    .grayed:after {
        content: "";
        position: absolute;
        width: 200%; 
        height: 200%;
        left: 50%;
        top: -50%;
        z-index: 9;
        background-color: white;
        mix-blend-mode: color;
        transform: rotate(30deg);
        transform-origin: left center;
        animation: rotate infinite 10s linear;
    }
    
    @keyframes rotate {
        from {     transform: rotate(0deg);}
        to {     transform: rotate(360deg);}
    
    }
    <div class="card-image grayed">
        <img src="https://dummyimage.com/600/400/ff00ff" />
    </div>