.container > * {
	box-sizing: border-box;
}


.main {
  width: 320px;
  float: left;
  padding: 15px;
  //border: 1px solid red;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-container > div {
	margin: 10px;
	text-align: left;
	line-height: 35px;
	font-size: 20px;
}

	h1:hover {
	  text-align: center;
	  background-color: #000;
	  color: #fff;
	}

	//p:hover {
	//  font-weight: 900;
	//}


	.image {
		width: 290px;
		height: auto;
		border-radius: 8px;
	}
	.image:hover {
	  transform: scaleX(-1);
	}
	
@media only screen and (max-width: 768px) {
	.flex-container > div {
	  margin: 10px;
	  text-align: left;
	  line-height: 35px;
	  font-size: 20px;
	}
}

@media only screen and (max-width: 480px) {
	.flex-container > div {
	  margin: 10px;
	  text-align: left;
	  line-height: 35px;
	  font-size: 20px;
	}
}

<!-- for mobile -->
@media(hover: hover) and (pointer: fine) {
    div > .pinfo:hover {
        background: #a8e1ff;
    }
}


.containerx {
  position: relative;
  width: 100%;
}

.image {
  opacity: 1;
  display: block;
  width: 290px;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  //top: 30%;
 // left: 30%;
  transform: translate(0%, -40%);
   text-align: left;
}

.containerx:hover .image {
  opacity: 0.3;
}

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

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 12px 32px;
}



  <!--transform: scale(5.5);
-->

div > .main {
    //height: 12em;
    width: 100%;
    margin: 0 auto;
    overflow:hidden;
}

div > .main:hover {
    overflow-y: scroll;
	overflow-x: hidden;
}

.pinfo {
	border-radius: 10px;
	background-color: #a8e1ff;
	opacity: 0.8;
	padding: 3px;
}