@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------------*/
.image-zbox {
    position: relative;
    margin: auto;
    overflow: hidden;
    max-height: 300px;
    /* width: 540px; */
}
.image-zbox img {
    /*max-width: 100%;*/
    /*transition: all 0.3s;*/ /*setting of original code*/
	transition: transform .5s;
    display: block;
    width: auto;
    max-height: 300px;
    
    transform: scale(1); /*scale of img when mouse leftout*/
}
.image-zbox:hover img {
    transform: scale(1.15); /*scale of img when mouse hover*/
}
/*-------------------------------------------------------------------*/
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  
  -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  text-align: center;
}

.row:hover .middle {
  opacity: 1;
}

.set_text {
  background-color: #C06;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
}
/*-------------------------------------------------------------------*/
.middle2 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  
    
  -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  text-align: center;
}

.row:hover .middle2 {
  opacity: 1;
}

.set_text2 {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
}
/*-------------------------------------------------------------------*/
.middle3 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  
  -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  text-align: center;
}

.row:hover .middle3 {
  opacity: 1;
}

.set_text3 {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
}
/*-------------------------------------------------------------------*/
.middle4 {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  
  -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  text-align: center;
}

.row:hover .middle4 {
  opacity: 1;
}

.set_text4 {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 10px 10px;
}
/*-------------------------------------------------------------------*/