.your_frame-1 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;
 
}

.background-image-1 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-1.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;

}

.your_frame-1:hover .background-image-1 {
  background-position: 0 100%;
}
/*//--=========================02====================================//*/
.your_frame-2 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;
 }
.background-image-2 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-2.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-2:hover .background-image-2 {
  background-position: 0 100%;
}


/*//--=========================03====================================//*/
.your_frame-3 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
 }
.background-image-3 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-3.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-3:hover .background-image-3 {
  background-position: 0 100%;
}


/*//--=========================04====================================//*/
.your_frame-4 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;
 }
.background-image-4 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-4.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-4:hover .background-image-4 {
  background-position: 0 100%;
}

/*//--=========================05====================================//*/
.your_frame-5 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;

 }
.background-image-5 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-5.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-5:hover .background-image-5 {
  background-position: 0 100%;
}

/*//--=========================06====================================//*/
.your_frame-6 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;

 }
.background-image-6 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-6.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-6:hover .background-image-6 {
  background-position: 0 100%;
}

/*//--=========================07====================================//*/
.your_frame-7 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;

 }
.background-image-7 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-7.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-7:hover .background-image-7 {
  background-position: 0 100%;
}

/*//--=========================08====================================//*/
.your_frame-8 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;

 }
.background-image-8 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-8.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-8:hover .background-image-8 {
  background-position: 0 100%;
}

/*//--=========================09====================================//*/
.your_frame-9 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;

 }
.background-image-9 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-9.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-9:hover .background-image-9 {
  background-position: 0 100%;
}

/*//--=========================10====================================//*/
.your_frame-10 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;

 }
.background-image-10 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-10.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-10:hover .background-image-10 {
  background-position: 0 100%;
}

/*//--=========================11====================================//*/
.your_frame-11 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  padding-right: 8px;

 }
.background-image-11 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-11.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-11:hover .background-image-11 {
  background-position: 0 100%;
}

/*//--=========================12====================================//*/
.your_frame-12 {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;

 }
.background-image-12 {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(Portfolio/img-12.jpg);
  transition: background-position 3s ease-out;
  border: 6px solid #ebebeb;
}
.your_frame-12:hover .background-image-12 {
  background-position: 0 100%;
}