.view {
    width: 480px;
    height: 320px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0px 0px 5px #aaa;
    cursor: pointer;
}
.view .mask, .view .content {
    width: 480px;
    height: 320px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.view img {
    display: block;
    position: relative;
}
.view a.info {
    background: url(../_inc/images/link.png) center no-repeat;
    display: inline-block;
    text-decoration: none;
    padding: 0;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
}



.effect1 img {
    opacity: 1;
    transform: scale(1,1);
    transition: all 0.2s ease-in;
}
.effect1 .mask {
    opacity: 0;
    overflow: visible;
    border-color: rgba(0,0,0,0.7) transparent transparent transparent;
    border-style: solid;
    border-width: 240px;
    width: 0;
    height: 0;
    transform: translateY(-125px);
    transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect1 a.info {
    opacity: 0;
    transform: translateY(-125px);
    transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect1:hover img {
    opacity: 0.7;
    transform: scale(2,2);
}
.effect1:hover .mask {
    opacity: 1;
    transform: translateY(0px);
}
.effect1:hover a.info {
    opacity: 1;
    transform: translateY(100px);
}



.effect2 .mask {
    opacity: 0;
    overflow: visible;
    border: 0px solid rgba(0,0,0,0.7);
    box-sizing: border-box;
    transition: all 0.4s ease-in-out;
}
.effect2 a.info {
    position: relative;
    top: -10px;
    opacity: 0;
    transform: scale(0,0);
    transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.effect2:hover .mask {
    opacity: 1;
    border: 160px solid rgba(0,0,0,0.7);
}
.effect2:hover a.info {
    opacity: 1;
    transform: scale(1,1);
    transition-delay: 0.3s;
}



.effect3 .mask {
	opacity: 0;
	overflow: visible;
	border: 160px solid rgba(0,0,0,0.7);
	box-sizing: border-box;
	transition: all 0.4s ease-in-out;
}

.effect3 a.info {
	position: relative;
	top: -10px; /* Center the link */
	opacity: 0;
	transition: opacity 0.5s 0s ease-in-out;
}

.effect3:hover .mask {
	opacity: 1;
	border: 160px solid rgba(0,0,0,0.7);
}

.effect3:hover a.info {
	opacity: 1;
	transition-delay: 0.3s;
}



.effect4 .mask {
  position: absolute; /* Center the mask */
  top: 60px;
  left: 140px;
  cursor: pointer;
  border-radius: 50%;
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 100px solid rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transform: scale(4);
  transition: all 0.3s ease-in-out;
}
.effect4:hover .mask {
  opacity: 0;
  border: 0px solid rgba(0,0,0,0.7);
  visibility: hidden;
}



.effect5 img {
    opacity: 0.2;
    transition: all 0.3s ease-in;
}
.effect5 .mask {
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    border: 160px solid rgba(0,0,0,0.7);
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.effect5:hover .mask {
    border: 0px double rgba(0,0,0,0.7);
    opacity: 0;
    visibility: hidden;
}
.effect5:hover img {
    opacity: 1;
}