/*Note: If you are using landscape images use 'background-size:auto 100%;' in .textOverImage and 'background-size:auto 110%;' in .textOverImage:hover*/

a{text-decoration:none;}
/*Add the following compatibility code for IE as you can't animate background-size in IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
	.textOverImage{background-size:cover!important;}
}
.textOverImage{
    position:relative;
    width:229px; /*229px*/
    height:300px; /*300px*/
    float:left;
   margin: 0px 14px 0px 0px;
    background-size:100%;
    background-position:center;
    transition:0.5s;
    overflow:hidden;
    border-radius:2px;
    box-shadow:0 0 4px #000;
    background-repeat: no-repeat;
  }

  .textOverImage:hover{
    background-size:110%;
  }

.textOverImage:before{
  position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
  transform:translateY(90%);/*use transform:translateY(100%); to remove footer*/
    background-color:rgba(0,0,0,0.0);

    color:#fff;
    padding:0 8px;
    content:attr(data-title);
    transition:0.5s 0.1s;
    color:#fff;
    font-weight:bold;
    font-size:1.5em;
		    margin: 10px 10px 10px 10px;
}

.ian1:before{
	background-image: url(../images/prf.png);
	background-repeat: no-repeat;

}

.ian2:before{
	background-image: url(../images/escuela.png);
	background-repeat: no-repeat;

}

.ian3:before{
	background-image: url(https://www.fundaciontelefonica.co/wp-content/uploads/2020/04/Logo-Educacion-para-la-paz-150-x-41_final.png);
	background-repeat: no-repeat;

}
.ian4:before{
	background-image: url(../images/conecta.png);
	background-repeat: no-repeat;

}

.ian5:before{
  background-image: url(https://www.fundaciontelefonica.co/wp-content/uploads/2020/04/Logo-Cubismo-150-x-41-22042020.png);
  background-repeat: no-repeat;

}

  .textOverImage:after{
    position:absolute;
    top:0;
    bottom:0;
    left:30px;
    right:30px;
    color:#fff;
    padding:8px;
    content:attr(data-text);
    transition:0.5s;
    padding-top:2em;
    margin-top:55px;
    transform:translateY(100%);
    opacity:1;
  }

  .textOverImage:hover:after{
    transform:translateY(0);
    transition:0.5s 0.1s;
    opacity:1;
		font-size: 0.8em;
		 font-family:sans-serif;
		text-align: center	;
  }
.textOverImage:hover:before{
    transform:translateY(0);
    padding:40px;
    background-color:rgba(0,32,45,0.8);
    transition:0.5s;
}

@media only screen and (max-width: 500px) {
  .textOverImage {
      margin: 5% 0 5% 0px;
  }
}