.itrans-01,.itrans-02,.itrans-03,.itrans-04,.itrans-05{   
	display: block;
    overflow: hidden;
}
.itrans-01 {
    display: block;
    position: relative
}
.itrans-01:after, .itrans-01:before {
    z-index: 1;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .6s ease 0s;
    -moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s
}

.itrans-01:hover:before {
    background-color: rgba(255,255,255,.5);
    bottom: 50%;
    top: 50%;
    transition: all .6s ease 0s;
    -moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s
}

.itrans-01:hover:after {
    background-color: rgba(255,255,255,.5);
    left: 50%;
    right: 50%;
    transition: all .6s ease 0s;
    -moz-transition: all .6s ease 0s;
    -webkit-transition: all .6s ease 0s;
    -o-transition: all .6s ease 0s
}
/*tran 02*/
.itrans-02 {
	position: relative;
}
.itrans-02::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.itrans-02:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
/*tran 3*/
.itrans-03 {
	position: relative;
}
.itrans-03::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.itrans-03:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
/*trans 04*/
.itrans-04:hover img {
	opacity: 1;
	-webkit-animation: flash 2s;
	animation: flash 2s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
/*trans 5*/
.itrans-05 img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.itrans-05:hover img {
	opacity: .6;
}