How to put white background hover on posts?

Bem, este tutorial explica como é aplicado um fundo branco à passagem do rato numa imagem de um post, veja como pode ser feito:

   1. Vá ao seu código e procuro por <style>;
   2. Entre <style> coloque este código:
        /*--Codes for Posts--*/
        .lovely{
        position:absolute;
        width:204px;
        height:0%;
        opacity:0.0;
        background:#fff;
        z-index:3;
        -webkit-transition: all 0.8s ease;
        -moz-transition: all 0.8s ease;
        -o-transition: all 0.8s ease;
        transition: all 0.8s ease;
        }

        #entry:hover .lovely{
        opacity:0.4;
        height:88%;
        -webkit-transition: all 0.8s ease;
        -moz-transition: all 0.8s ease;
        -o-transition: all 0.8s ease;
        transition: all 0.8s ease;}

        .lovely{
        width:238px;
        height:0%;
        bottom:12px;
        left:3px;
        position:absolute;
        opacity:0;
        z-index:9999;
        background:rgba(300,300,300,0.4);
        transition:1.5s ease;
        -o-transition:1.5s ease;
        -moz-transition:1.5s ease;
        -webkit-transition:1.5s ease;
        }

        #entry:hover .lovely{
        opacity:1;
        height:94%;
        }

        .glamour{
        width:0px;
        height:94%;
        top:12px;
        right:12px;
        position:absolute;
        opacity:0;
        z-index:9999;
        background:rgba(300,300,300,0.4);
        transition:2s ease;
        -o-transition:2s ease;
        -moz-transition:2s ease;
        -webkit-transition:2s ease;}

        #entry:hover .glamour{
        opacity:1.0;
        width:233px;}
        /*--End--*/

   3. Depois de colocado, procura por </head>;
   4. Entre {block:Photo} coloque este código:
        <div class=“lovely”></div><div class=“glamour”></div>, como se pode ver no código abaixo:

        {block:Photo}{block:IndexPage}
        <div class=“lovely”></div><div class=“glamour”></div>
        <div class=“perma”>
        <a href=“{permalink}” title=“go to the permalink page”>{notecount} notes</a> &nbsp;☓&nbsp; <a title=“click to reblog” href=“{ReblogURL}”>repost</a></center></div>{/block:IndexPage}

        {block:IndexPage}
        <img src=“{PhotoURL-HighRes}” alt=“{PhotoAlt}” width=270px;>
        {/block:IndexPage}
        {block:permalinkpage}{LinkOpenTag}<center>
        <img src=“{PhotoURL-HighRes}” alt=“{PhotoAlt}” width=360px;/>
        {LinkCloseTag}</center>{/block:permalinkpage}
        {/block:Photo}



x ----------------------------------------------------------------------------------------------------------------------------------- x


Well, this tutorial explains how you applied a white background with the passage of the mouse in the posts, see what to do.

   1. Go  to the code and search for <style>;
   2. Beneath <style> put this code:
        /*--Codes for Posts--*/
        .lovely{
        position:absolute;
        width:204px;
        height:0%;
        opacity:0.0;
        background:#fff;
        z-index:3;
        -webkit-transition: all 0.8s ease;
        -moz-transition: all 0.8s ease;
        -o-transition: all 0.8s ease;
        transition: all 0.8s ease;
        }

        #entry:hover .lovely{
        opacity:0.4;
        height:88%;
        -webkit-transition: all 0.8s ease;
        -moz-transition: all 0.8s ease;
        -o-transition: all 0.8s ease;
        transition: all 0.8s ease;}

        .lovely{
        width:238px;
        height:0%;
        bottom:12px;
        left:3px;
        position:absolute;
        opacity:0;
        z-index:9999;
        background:rgba(300,300,300,0.4);
        transition:1.5s ease;
        -o-transition:1.5s ease;
        -moz-transition:1.5s ease;
        -webkit-transition:1.5s ease;
        }

        #entry:hover .lovely{
        opacity:1;
        height:94%;
        }

        .glamour{
        width:0px;
        height:94%;
        top:12px;
        right:12px;
        position:absolute;
        opacity:0;
        z-index:9999;
        background:rgba(300,300,300,0.4);
        transition:2s ease;
        -o-transition:2s ease;
        -moz-transition:2s ease;
        -webkit-transition:2s ease;}

        #entry:hover .glamour{
        opacity:1.0;
        width:233px;}
        /*--End--*/

   3. After placing, search for </head>;
   4. Beneath {block:Photo} put this code:
        <div class=“lovely”></div><div class=“glamour”></div>, as can be seen in the code below:

        {block:Photo}{block:IndexPage}
        <div class=“lovely”></div><div class=“glamour”></div>
        <div class=“perma”>
        <a href=“{permalink}” title=“go to the permalink page”>{notecount} notes</a> &nbsp;☓&nbsp; <a title=“click to reblog” href=“{ReblogURL}”>repost</a></center></div>{/block:IndexPage}

        {block:IndexPage}
        <img src=“{PhotoURL-HighRes}” alt=“{PhotoAlt}” width=270px;>
        {/block:IndexPage}
        {block:permalinkpage}{LinkOpenTag}<center>
        <img src=“{PhotoURL-HighRes}” alt=“{PhotoAlt}” width=360px;/>
        {LinkCloseTag}</center>{/block:permalinkpage}
        {/block:Photo}






Produced by Hisabeel © All rights reserved