Post não fica com o efeito parecido

Seguinte,

Não estou conseguindo fazer o efeito desejado, mas não consegui, ficou desse jeito:

https://drive.google.com/open?id=0B9M9e1QGrVYaVW11Y2VpNFB5NXM

CSS:

/*site.css*/

.blog a:hover + .inicio-post,
.blog a:focus + .inicio-post {
    display: block;
}
.blog a:hover,
.blog a:focus {
    background-color: #F2FFFC;
    color: #F26;
}

/*index.css*/
.inicio-post{
    background-color: #F2FFFC;
    color: #F26;
    height: 6em;
    padding: 3em;
    /*left: 3em;*/
    display: none;
}

/*index.html*/
<section class="secao-inicio blog">
            <h2>Blog</h2>
            <small>Últimos posts</small>
            <ol>
                <li class="mais-recente">
                    <a href="blog.html">O essencial de design responsivo</a>
                    <p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
                </li>
                <li>
                    <a href="blog.html">Por que fazer páginas acessíveis?</a>
                     <p class="inicio-post">Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>
                </li>
                <li>
                    <a href="blog.html">JavaScript não obstrusivo</a>
                    <p class="inicio-post">JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>

Obrigado desde já