@keyframes comeIn {
    0% { transform: scale(.5); opacity: 0; }
    75% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

#ArticlesDemo .xmasonry .xblock {
    animation: comeIn ease 0.5s;
    animation-iteration-count: 1;
    transition: left .3s ease, top .3s ease;
}

/****** These styles fix the cover ratio ********/
#ArticlesDemo .imageBox {
    position: relative;
    background-color: gray;
}

#ArticlesDemo .imageBox:before {
    content: "";
    display: block;
    padding-top: 50%; /* initial ratio of 2:1*/
}

#ArticlesDemo .image {
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/****** ******************************** ********/

#ArticlesDemo .image {
    box-shadow: inset 0 0 3px darkgray;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

#ArticlesDemo .article {
    margin: 7px;
    padding: 5px;
    border-radius: 3px;
    background-color: white;
    box-shadow: 0 1px 3px darkgray;
}

#ArticlesDemo .article .title {
    position: absolute;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    color: white;
    text-shadow: 0 1px 3px black, 0 1px 3px black;
    font-size: 21px;
    padding: 6px;
    background: -moz-linear-gradient(top, rgba(69,72,77,0) 0%, rgba(52,54,58,0.5) 25%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(69,72,77,0) 0%,rgba(52,54,58,0.5) 25%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(69,72,77,0) 0%,rgba(52,54,58,0.5) 25%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}