@font-face {
    font-family: CastleT;
    src: url(/fuentes/CastleT.ttf);
}

@font-face {
    font-family: CastleTBold;
    src: url(/fuentes/CastleTBold.ttf);
}

@font-face {
    font-family: Avian;
    src: url(/fuentes/AVIAN/AVIAN.ttf);
}

div#imagen {
    width: 300px;
    height: 200px;
    background-size: cover;
    /*sólo para ejemplo*/
    background-image: url("/imagenes/teletón.png");
    margin: 30px auto;
}

div#info {
    position: absolute;
    overflow: hidden;
    width: 300px;
    height: 200px;
    background-color: rgba(31, 31, 31, 0.9);
    opacity: 0;
    transition: opacity 0.3s;
}

div#imagen:hover div#info {
    opacity: 1;
}

p#headline {
    position: absolute;
    font-size: 1.5rem;
    margin-left: -75px;
    margin-top: 15px;
    transition: margin-left 0.3s;
}

div#imagen:hover p#headline {
    margin-left: 115px;
}

p#descripcion {
    font-size: 1rem;
    text-align: center;
    margin-top: 200px;
    transition: margin-top 0.4s;
}

div#imagen:hover p#descripcion {
    margin-top: 75px;
}