efecto hover CSS3 segunda forma

efecto hover

by JavaFace

HTML

<div class="main"> 

            <div class="conte_padre panel_efecto">
                    <img src="https://lh4.googleusercontent.com/--Q2Czu7c2Y4/UX_sHekD4NI/AAAAAAAAAhA/OYTc0p9t4PE/w278-h231/ey.jpg" />
                    <div class="mascara_efecto">
                        <h2>Anunciate</h2>
                       <p>Temenos los precios mas bajos del Mercado</p>
                        <a href="#" class="info">Read More</a>
                    </div>
             </div>
             <!---->
             <div class="conte_padre panel_efecto">
                    <img src="https://lh4.googleusercontent.com/--Q2Czu7c2Y4/UX_sHekD4NI/AAAAAAAAAhA/OYTc0p9t4PE/w278-h231/ey.jpg" />
                    <div class="mascara_efecto">
                        <h2>Anunciate</h2>
                       <p>Temenos los precios mas bajos del Mercado</p>
                        <a href="#" class="info">Read More</a>
                    </div>
             </div>
             <!---->
             <div class="conte_padre panel_efecto">
                    <img src="https://lh4.googleusercontent.com/--Q2Czu7c2Y4/UX_sHekD4NI/AAAAAAAAAhA/OYTc0p9t4PE/w278-h231/ey.jpg" />
                    <div class="mascara_efecto">
                        <h2>Anunciate</h2>
                       <p>Temenos los precios mas bajos del Mercado</p>
                        <a href="#" class="info">Read More</a>
                    </div>
             </div>
             <!---->
             <div class="conte_padre panel_efecto">
                    <img src="https://lh4.googleusercontent.com/--Q2Czu7c2Y4/UX_sHekD4NI/AAAAAAAAAhA/OYTc0p9t4PE/w278-h231/ey.jpg" />
                    <div class="mascara_efecto">
                        <h2>Anunciate</h2>
                       <p>Temenos los precios mas bajos del Mercado</p>
                        <a href="#" class="info">Read More</a>
                    </div>
             </div>
</div>

CSS

.main{
	position:relative;
    width:680px;
    margin: 0 auto;
}
/*contenedor*/
.conte_padre {
   width: 278px;
   height: 231px;
   margin: 10px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor:pointer;
   background-color: rgba(210,3,3, 0.7);
   -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4),inset 0px 0px 22px rgba(120, 120, 120, 0.2);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4),inset 0px 0px 22px rgba(120, 120, 120, 0.2);
   box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4),inset 0px 0px 22px rgba(120, 120, 120, 0.2);
}
.conte_padre .mascara_efecto,.conte_padre .content {
   width: 278px;
   height: 231px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.conte_padre img {
   display: block;
   position: relative;
}
.conte_padre h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font:18px Georgia;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.conte_padre p {
   font-family: Georgia, serif;
   font-size: 13px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.conte_padre a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   background-color: rgba(245,174,52, 0.7);
}
.conte_padre a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
/*fin*/
/*efecto*/
.panel_efecto img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.panel_efecto...