.tile,.tile img{transition:all .4s ease-out}body{background-color:#eee}.wrap{margin:20px auto 0;width:100%;display:flex;align-items:space-around;max-width:1200px}.tile{width:400px;height:400px;margin:20px;background-color:#99aeff;display:inline-block;background-size:cover;position:relative;cursor:pointer;box-shadow:0 35px 77px -17px rgba(0,0,0,.44);overflow:hidden;color:#fff;font-family:Roboto}.dots,.tile .text,.tile img{position:absolute}.tile img{height:100%;width:100%;top:0;left:0;z-index:0}.tile .text{padding:30px;height:calc(100% - 60px)}.tile h1{font-weight:300;margin:0;text-shadow:2px 2px 10px rgba(0,0,0,.3)}.tile h2{font-weight:100;margin:20px 0 0;font-style:italic;transform:translateX(200px)}.tile p{font-weight:300;margin:20px 0 0;line-height:25px;transform:translateX(-200px);transition-delay:.2s}.animate-text{opacity:0;transition:all .6s ease-in-out}.tile:hover{box-shadow:0 35px 77px -17px rgba(0,0,0,.64);transform:scale(1.05)}.tile:hover img{opacity:.2}.tile:hover .animate-text{transform:translateX(0);opacity:1}.dots{bottom:20px;right:30px;margin:0 auto;width:30px;height:30px;color:currentColor;display:flex;flex-direction:column;align-items:center;justify-content:space-around}.dots span{width:5px;height:5px;background-color:currentColor;border-radius:50%;display:block;opacity:0;transition:transform .4s ease-out,opacity .5s ease;transform:translateY(30px)}.tile:hover span{opacity:1;transform:translateY(0)}.dots span:nth-child(1){transition-delay:50ms}.dots span:nth-child(2){transition-delay:.1s}.dots span:nth-child(3){transition-delay:.15s}@media (max-width:1000px){.wrap{flex-direction:column;width:400px}}