Css

Opacity

<style>

    *{

        margin: 0px;

    }

    .parent{

        height: 300px;

        width: 300px;

        background-color: aqua;

        position: relative;

        float: left;

        margin: 10px;

    }

    .child{

        height: 280px;

        width: 280px;

        background-color: blueviolet;

        margin: 10px 10px 10px 10px;

        position: absolute;

    }

    img{

        height: 100%;

        width: 100%;

        opacity: .1;

    }

    .child img:hover{

        opacity: 1;

    }

</style>

<div class="parent">

    <div class="child">

        <img src="https://static.toiimg.com/thumb/msid-63428244,width-400,resizemode-4/63428244.jpg">

    </div>

</div>

<div class="parent">

    <div class="child">

        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiNlb9wNjyUltRpgRpsiAs12HLSwa8vJmFfsLhWdlxm5DJhxqh">

    </div>

</div>

<div class="parent">

    <div class="child">

        <img src="https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcQgltU27MIHxxDXwtyhnBsZJq97_RG53WolfZfazivmu2a2RBZmzGOV_hIdLcml6ilMqGlCIzT8CNdMpgo">

    </div>

</div>