Beautiful CSS Frame for Art Gallery

Welcome to 2017 year! AA Koben akan berbagi tutorial ringan bagaimana cara menghias gambar dengan menambahkan bingkai atau frame indah di setiap sisinya. Jadi jika sobat mempunyai sebuah image, kebetulan images tersebut memang layak diberikan keindahan dalam tampilannya, maka anda tidak salah membaca artikel ini :P
This is tutorial how to make iframe picture using CSS.

.frame img {
max-width: 100%;
max-height: 100%;
border: solid 2px;
border-color: #ccb #eed #ffe #eed;
}
.frame {
height: 80vh;
padding: 8vmin 0;
margin: 10px 28%;
border-radius: 3px;
position: relative;
text-align: center;
display: inline-block;
background-color: #ddc;
box-sizing: border-box;
border: solid 5vmin #eee;
border-color: #ddd #eee #fff #eee;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
}
.frame:before {
content: "";
top: -2vmin;
left: -2vmin;
right: -2vmin;
bottom: -2vmin;
border-radius: 3px;
position: absolute;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
}
.frame:after {
content: "";
top: -2.5vmin;
left: -2.5vmin;
right: -2.5vmin;
bottom: -2.5vmin;
position: absolute;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

<div class="frame">
  <img src="LINK-IMAGE" alt="" />
</div>

DEMO: codepen.io/chris22smith/full/PbBwjp/

Sudah begitu saja, kalau mau versi galeri berarti harus terus menyimak ;))

figure {
padding: 20px;
overflow: hidden;
position: relative;
border-width: 10px;
border-style: solid;
display: inline-block;
vertical-align: middle;
border-color: #ccc #ddd #efefef #ddd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset, 0 5px 7px rgba(0, 0, 0, 0.5);
}
figure:before, figure:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
}
figure:before {
z-index: -2;
border: 30px solid #ddc;
box-shadow: 0 0 5px black inset;
}
figure:after {
z-index: -1;
background: transparent;
border-top-left-radius: 300% 300%;
box-shadow: -20px -20px 100px rgba(255, 255, 255, 0.5);
}
figure figcaption {
bottom: 6px;
right: 29px;
padding: 5px;
font-size: 16px;
position: absolute;
text-align: center;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 60px);
-webkit-transition: .3s;
transition: .3s;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0.6);
transform: scale(0.6);
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;

}
figure figcaption:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
figure img {
z-index: -3;
width: auto;
height: 50vmin;
position: relative;
}

<figure title="YOUR TITLE I">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG I</figcaption>
</figure>

<figure title="YOUR TITLE II">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG II</figcaption>
</figure>

DEMO: codepen.io/vank0/full/BQqBOx/

BONUS:

Focal Point Picker - Multiple Dropdown Menus - World Places (CSS 3d hover) - BUTTON LOVE - Simple Button Rollover - Time in Words - Tilt to read - wick editor - polr - 110 CSS Menu - bttn.css - Masonry - csssecrets - csssecrets on dabblet - The SVG Font Machine