Background image opacity

Adding opacity to background image using ::after pseudo class.

by vijayweb

HTML

<div class="nature"></div>

CSS

.nature {
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border: 1px solid #ddd;
    position: relative;
}

.nature:after {
    content:"";
    background: url(https://www.nationsonline.org/gallery/Sri_Lanka/Sigiriya-Sri-Lanka.jpg) center center no-repeat;
    background-size: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    transition: opacity .3s ease-in-out;
}

.nature:hover::after {
    opacity: 0.6;
}