body
{
  margin: 0;
  padding: 0;
  font-family: sans-serif
}
.container
{
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.container .box
{
  position: relative;
  width: 300px;
  height: 300px;
  background: rgb(160, 60, 155);
  margin: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.container .box .imgBox
{
  position: relative;
  overflow: hidden;
}
.container .box .imgBox img
{
  max-width: 100%;
  transition: transform 2s;
}
.container .box:hover .imgBox img
{
  transform: scale(1.2);
}
.container .box .details
{
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.8);
  transform: scaleY(0);
  transition: transform .5s;
}
.container .box:hover .details
{
  transform: scaleY(1);
}
.container .box .details .content
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 15px;
  color: #fff;
}
.container .box .details .content h1
{
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: rgb(254, 236, 255);
}
.container .box .details .content p
{
  margin: 10px 0 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0;
  }
  .container .box {
  margin: 0;
  }

  }