.g5plus-image-box {
position: relative;
}
.g5plus-image-box .content-hover {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
opacity: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
color: #FFFFFF;
z-index: 2;
padding: 15px;
}
.g5plus-image-box > img {
width: 100%;
height: auto;
}
.g5plus-image-box:before {
content: '';
display: block; z-index: 1;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.g5plus-image-box:hover:before,
.g5plus-image-box.hover-active:before,
.g5plus-image-box:hover .content-hover,
.g5plus-image-box.hover-active .content-hover {
opacity: 1;
}
.g5plus-image-box.hover-active:hover:before,
.g5plus-image-box.hover-active:hover .content-hover {
opacity: 0;
}