.card {
  width:33%;
  min-width: 282px;
  height: 325px;
  overflow: hidden;
  position: relative;
  margin:0.1% 0.5% 1% 0.1%;
  display:block
}
.card:nth-of-type(3n){
  margin-right:0;
}
.card:nth-of-type(6n){
  margin-right:0;
}
.card:nth-of-type(9n){
  margin-right:0;
}
.card img {
  width: 100%;
  min-height:100%;
  transition:all 0.9s
}
.card:hover img{
 transform:scale(1.2,1.2)
}
.card:active img{
 transform:scale(1.2,1.2)
}
.boardinfo {
  position: absolute;
  bottom: 5%;
  background: #fff;
  text-align:left;
  width: 100%;
  height: 80px;
  overflow: hidden;
  right: 0;
  margin: 0 auto;
  padding: 5px 1%;
  box-sizing: border-box;
  opacity: 0.8;
  transition: all 0.4s
}

.card:hover .boardinfo {
  width: 100%;
  height: 100%;
  bottom: 0;
  opacity: 0.9;
  padding:5px 4%
}
.card:active .boardinfo {
  width: 100%;
  height: 100%;
  bottom: 0;
  opacity: 0.9;
  padding:5px 4%
}
.boardinfo h4 {
  margin: 5px 0px 5px 2px;
  transition:color 0.4s
}

.boardinfo p {
  opacity: 0;
  text-align:left;
  transition: all 0.2s
  font-size:6px;
}

.card:hover .boardinfo p,.card:hover {
  opacity: 1
}
.card:hover h4{
  color:#38c
}
.card:active .boardinfo p,.card:active {
  opacity: 1
}
.card:active h4{
  color:#38c
}

@media (max-width:799px){
  .card {width:100%;margin-right:0}
}