.img-with-caption{
	overflow: hidden; /*is noodzakelijk want door de caption 50px naar beneden wordt verplaats (over de tekst)en dat  mag natuurlijk niet;*/
    cursor:pointer;
	position: relative; /*is omdat caption div de position absolute krijgt*/
display: flex;
align-content: flex-end;
}





.img-with-caption.topimage{
 margin-bottom:20px;
display: block;
}

.img-with-caption:hover .caption{
    opacity:1;
	
    transform:translateY(-30px);
}

.img-with-caption:hover .caption.full-tile{
    transform:translateY(-100%);
}
.img-with-caption .caption{
    position:absolute;
    left:0;
    width:100%;
    height:30px;
    opacity:0;
    bottom:-30px;
    transition:all .15s ease-in-out
}



.img-with-caption .caption.full-tile{
    height:100%;
    bottom:-100%
}



.img-with-caption .caption .blur{
    background-color:rgba(0,0,0,.65);
    width:100%;
    height:100%;
    z-index:5;
    position:absolute;
    bottom:0;
    left:0
}



.img-with-caption .caption .caption-text{
    z-index:10;
    color:#fff;
    position:absolute;
	line-height:30px;
    width:100%;
    height:100%;
    text-align:center;
	font-size: 12px;
    bottom:0;
    left:0
}



#myImg,  .myImg{
	

  border-radius: 5px;
  transition: 0.3s;
  /* shrink or grow image */
  max-width: 100%;
/* center image horizontal */
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}







.normalImg{
	
  border-radius: 5px;
 
  /* shrink or grow image */
  max-width: 100%;
/* center image horizontal */
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}