CSS-Only Vignette

A simple way to get vignettes with a container, a span and an image: things you'll be using anyway!

by Victor

HTML

<div class="container">
   <span class="vin"></span>
    <img src="http://www.hhhhold.com/900" alt=""/>
</div>

<div class="container2">
   <span class="vin"></span>
    <p>Works for Text too! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit architecto quia ullam quidem eum. Aperiam expedita corporis adipisci veritatis optio deserunt ad eligendi accusantium dolor eaque quaerat earum sed delectus!</p>
</div>

SCSS

.container {
    width:400px;
    height:400px;
    position:relative;
    top:1px;
    overflow:hidden;
    /* just to break em up */
    margin-bottom: 20px;
    
    .vin {
        box-shadow:inset 0 0 100px 70px rgba(0,0,40,0.7);
        border-radius:50%;
        display:block;
        position:absolute;
        top:-25%;
        left:-25%;
        width:150%;
        height:150%;
        z-index:100;
    }
    img{
        position:relative;
        z-index:1;
    }
    
}
.container2 {
    width:400px;
    height:100px;
    position:relative;
    top:1px;
    overflow:hidden;
    padding:40px;
    
    .vin {
        /* background: red; */
        box-shadow:inset 0 0 40px 10px #000;
        border-radius:50%;
        display:block;
        position:absolute;
        top:-25%;
        left:-25%;
        width:150%;
        height:150%;
        z-index:100;
    }
    img{
        position:relative;
        z-index:1;
    }
    
}