Edit in JSFiddle

<div class="thumbnail_image">
    <img class="thumbnail " src="//misc.ridibooks.com/cover/754015309/xxlarge" alt="마음에 들어" data-log="" data-original-cover="//misc.ridibooks.com/cover/754015309/xxlarge">
    <span class="border"></span>
</div>

.thumbnail_image {
    position: relative;
    width: 200px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
}

.thumbnail_image::before {
    content: "";
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0px, transparent 5%, transparent 95%, rgba(0, 0, 0, 0.2) 100%);
}

.thumbnail {
    width: 100%;
    max-height: 313px;
}

.border {
    box-sizing: border-box;
    opacity: 0.2;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 3;
    border: 1px solid #000;
}