<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
/*** Default shared CSS ****/
figure.blurfilter{
 margin: 0;
 padding: 0;
 display: inline-block;
 position: relative;
 overflow: hidden; /* hide overflowing elements by default */
}
figure.blurfilter img{
 display: block;
 width: 200px; /* width of image */
 height: auto;
 transition: all 0.1s 0.1s;
}
figure.blurfilter figcaption{
 position: absolute;
 display: block;
 text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 text-align: center;
 background: white;
 padding: 0px;
 z-index: 100;
 width: 100%;
 height: 100%;
 overflow: hidden;
 top: 0%;
 left: 0%;
  font-family: 'Josefin Sans', sans-serif; /* google font */
 font-size: 16px;
 opacity: 0;
 -moz-transition: all 0.4s;
 -webkit-transition: all 0.4s;
 transition: all .4s;
}
figure.blurfilter figcaption h3{
 border-bottom: 1px solid red;
 text-align: center;
 width: 100%;
 margin: 0;
}
figure.blurfilter figcaption p{
 text-align: center;
 margin-top: 0px;
 line-height: 1.5;
}
figure.blurfilter figcaption a{
 text-decoration: none;
}
/* Default effect */
figure.blurfilter:hover img{
  -webkit-filter: blur(0px); /* blur filter */
  filter: blur(0px); /* blur filter */
 -webkit-transform: scale(1.03);
 transform: scale(1.03);
 -moz-transition: all 0.4s;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}
figure.blurfilter:hover figcaption{
 opacity: 1;
 box-shadow: 0 0 0px gray;
 -moz-transition: all .4s .4s;
 -webkit-transition: all .4s .4s;
 transition: all .4s .4s;
}
/* Semi transparent figcation background effect */
figure.semitransparent figcaption{
 background: transparent;
}
figure.semitransparent figcaption:before{
 content: '';
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background: white;
 opacity: .5; /* render background semi transparent */
}

/* Rotate figcation effect */
figure.blurrotate figcaption{
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
}
figure.blurrotate:hover figcaption{
 -webkit-transform: rotate(0);
 transform: rotate(0);
}
/* Slideup figcation effect */
figure.slideup figcaption{
 -webkit-transform: translateY(100%);
 transform: translateY(100%);
}
figure.slideup:hover figcaption{
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
/* RotateX figcation effect */
figure.rotatex figcaption{
 -webkit-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
figure.rotatex:hover figcaption{
 -webkit-transform: rotateX(0);
 transform: rotateX(0);
}
/* RotateY figcation effect */
figure.rotatey figcaption{
 -webkit-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
figure.rotatey:hover figcaption{
 -webkit-transform: rotateY(0);
 transform: rotateY(0);
}
</style>

/* figure2 Ãß°¡ ½ÃÀÛ */
<style>
/*** Default shared CSS ****/
figure2.blurfilter{
 margin: 0;
 padding: 0;
 display: inline-block;
 position: relative;
 overflow: hidden; /* hide overflowing elements by default */
}
figure2.blurfilter img{
 display: block;
 width: 120px; /* width of image */
 height: auto;
 transition: all 0.1s 0.1s;
}
figure2.blurfilter figcaption{
 position: absolute;
 display: block;
 text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 text-align: center;
 background: white;
 padding: 0px;
 z-index: 100;
 width: 100%;
 height: 100%;
 overflow: hidden;
 top: 0%;
 left: 0%;
  font-family: 'Josefin Sans', sans-serif; /* google font */
 font-size: 16px;
 opacity: 0;
 -moz-transition: all 0.4s;
 -webkit-transition: all 0.4s;
 transition: all .4s;
}
figure2.blurfilter figcaption h3{
 border-bottom: 1px solid red;
 text-align: center;
 width: 100%;
 margin: 0;
}
figure2.blurfilter figcaption p{
 text-align: center;
 margin-top: 0px;
 line-height: 1.5;
}
figure2.blurfilter figcaption a{
 text-decoration: none;
}
/* Default effect */
figure2.blurfilter:hover img{
  -webkit-filter: blur(0px); /* blur filter */
  filter: blur(0px); /* blur filter */
 -webkit-transform: scale(1.03);
 transform: scale(1.03);
 -moz-transition: all 0.4s;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}
figure2.blurfilter:hover figcaption{
 opacity: 1;
 box-shadow: 0 0 0px gray;
 -moz-transition: all .4s .4s;
 -webkit-transition: all .4s .4s;
 transition: all .4s .4s;
}
/* Semi transparent figcation background effect */
figure2.semitransparent figcaption{
 background: transparent;
}
figure2.semitransparent figcaption:before{
 content: '';
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background: white;
 opacity: .5; /* render background semi transparent */
}

/* Rotate figcation effect */
figure2.blurrotate figcaption{
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
}
figure2.blurrotate:hover figcaption{
 -webkit-transform: rotate(0);
 transform: rotate(0);
}
/* Slideup figcation effect */
figure2.slideup figcaption{
 -webkit-transform: translateY(100%);
 transform: translateY(100%);
}
figure2.slideup:hover figcaption{
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
/* RotateX figcation effect */
figure2.rotatex figcaption{
 -webkit-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
figure2.rotatex:hover figcaption{
 -webkit-transform: rotateX(0);
 transform: rotateX(0);
}
/* RotateY figcation effect */
figure2.rotatey figcaption{
 -webkit-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
figure2.rotatey:hover figcaption{
 -webkit-transform: rotateY(0);
 transform: rotateY(0);
}
</style>
/* figure2 Ãß°¡ ³¡ */

/* figure3 Ãß°¡ ½ÃÀÛ */
<style>
/*** Default shared CSS ****/
figure3.blurfilter{
 margin: 0;
 padding: 0;
 display: inline-block;
 position: relative;
 overflow: hidden; /* hide overflowing elements by default */
}
figure3.blurfilter img{
 display: block;
 width: 60px; /* width of image */
 height: auto;
 transition: all 0.1s 0.1s;
}
figure3.blurfilter figcaption{
 position: absolute;
 display: block;
 text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 text-align: center;
 background: white;
 padding: 0px;
 z-index: 100;
 width: 100%;
 height: 100%;
 overflow: hidden;
 top: 0%;
 left: 0%;
  font-family: 'Josefin Sans', sans-serif; /* google font */
 font-size: 16px;
 opacity: 0;
 -moz-transition: all 0.4s;
 -webkit-transition: all 0.4s;
 transition: all .4s;
}
figure3.blurfilter figcaption h3{
 border-bottom: 1px solid red;
 text-align: center;
 width: 100%;
 margin: 0;
}
figure3.blurfilter figcaption p{
 text-align: center;
 margin-top: 0px;
 line-height: 1.5;
}
figure3.blurfilter figcaption a{
 text-decoration: none;
}
/* Default effect */
figure3.blurfilter:hover img{
  -webkit-filter: blur(0px); /* blur filter */
  filter: blur(0px); /* blur filter */
 -webkit-transform: scale(1.03);
 transform: scale(1.03);
 -moz-transition: all 0.4s;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}
figure3.blurfilter:hover figcaption{
 opacity: 1;
 box-shadow: 0 0 0px gray;
 -moz-transition: all .4s .4s;
 -webkit-transition: all .4s .4s;
 transition: all .4s .4s;
}
/* Semi transparent figcation background effect */
figure3.semitransparent figcaption{
 background: transparent;
}
figure3.semitransparent figcaption:before{
 content: '';
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 background: white;
 opacity: .5; /* render background semi transparent */
}

/* Rotate figcation effect */
figure3.blurrotate figcaption{
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
}
figure3.blurrotate:hover figcaption{
 -webkit-transform: rotate(0);
 transform: rotate(0);
}
/* Slideup figcation effect */
figure3.slideup figcaption{
 -webkit-transform: translateY(100%);
 transform: translateY(100%);
}
figure3.slideup:hover figcaption{
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
/* RotateX figcation effect */
figure3.rotatex figcaption{
 -webkit-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
figure3.rotatex:hover figcaption{
 -webkit-transform: rotateX(0);
 transform: rotateX(0);
}
/* RotateY figcation effect */
figure3.rotatey figcaption{
 -webkit-transform: rotateY(90deg);
 transform: rotateY(90deg);
}
figure3.rotatey:hover figcaption{
 -webkit-transform: rotateY(0);
 transform: rotateY(0);
}
</style>
/* figure3 Ãß°¡ ³¡ */