Ver Mensaje Individual
  #8 (permalink)  
Antiguo 11/03/2010, 13:37
Avatar de mayid
mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 9 meses
Puntos: 101
Respuesta: como hago este marco en las imagenes?

Este es el ejemplo original de la pagina de Anime. Recortandolo un poco podes obtener tu propio marco:

Cita:
<div class="item">
<div class="boxgrid captionfull"><a href="anime/working.html" ><img src="http://img.animeid.com/working.gif" alt="Working!! sub español" width="166" height="250" border="0" class="imgl"/></a><a href="#"></a>
<div class="cover boxcaption">
<h1>Working!!</h1>
</div>
</div>
</div>
Cita:
.item{
width: 191px;
height: 277px;
background: url(imagenes/item.gif);
float:left;
margin-right:5px;
margin-bottom:5px;
}
.boxgrid{
width: 166px;
height: 250px;
*height: 240px;
margin:12px;
*padding:12px;
*margin:0px;
float:left;
overflow: hidden;
position: relative;
}
.boxgrid h1{
color:#FFFFFF;
font-family:Verdana;
font-weight:bold;
font-size:11px;
text-align:center;
}
.boxgrid img{
border: 1px solid #000;
}

.boxcaption{
position: absolute;
background: #000;
height: 38px;
width: 100%;
*width: 144px;
*margin-left:12px;
*padding:12px;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60 );
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=6 0)";
}

.captionfull .boxcaption {
top: 212px;
left: 0px;
}
src: http://animeid.com/estilo2.css