Aqui algunas capturas para que vean (aclaro yo mejore el diseño si necesitan ayuda manden un MP y no la pidan por el Tema)
La instalación es fácil simplemente vamos a hacer esto
Agregamos esto al final del estilo.css
ul.fotos-detail {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.fotos-detail li {
-moz-transition: all 200ms ease-in-out 0s;
-ms-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
-webkit-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
list-style: none outside none;
background: #FFF;
border: 1px solid #D2D5D9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(113, 117, 129, 0.2);
float: left;
margin: 10px 7px;
padding: 5px;
}
ul.fotos-detail li:hover {
background:#6eb1e0;
border: 1px solid #177bc0;
border-bottom-color: #0f4d78;
-moz-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
-webkit-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
}
ul.fotos-detail .notification-info {
-moz-transition: all 200ms ease-in-out 400ms;
-ms-transition: all 200ms ease-in-out 400ms;
-o-transition: all 200ms ease-in-out 400ms;
-webkit-transition: all 200ms ease-in-out 400ms;
transition: all 200ms ease-in-out 400ms;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
font-family: Arial,Helvetica;
line-height: 1;
padding: 7px 0;
position: absolute;
text-align: center;
width: 100%;
opacity:1;
z-index: 15;
}
ul.fotos-detail li:hover .notification-info {
opacity: 0;
margin-left: -180px;
}
ul.fotos-detail .notification-info span {
color: #FFF;
font-size: 11px;
font-weight: bold;
word-wrap: break-word;
}
.img-box-corte-fotos {
background-color: #FFF;
height: 180px;
overflow: hidden;
position: relative;
width: 210px;
z-index: 99;
}
.img-box-corte-fotos img {
width: 350px;
}
.title-ff {
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
display: block;
font-size: 12px !important;
margin-bottom: 5px;
padding-bottom: 5px;
}
.img-box-corte-fotos .time {
font-weight: bold;
}
.conten-img-cut {
-moz-transition: all 200ms ease-in-out 200ms;
-ms-transition: all 200ms ease-in-out 200ms;
-o-transition: all 200ms ease-in-out 200ms;
-webkit-transition: all 200ms ease-in-out 200ms;
transition: all 200ms ease-in-out 200ms;
height: 180px;
overflow: hidden;
position: relative;
width: 210px;
opacity:1;
z-index: 10;
}
ul.fotos-detail li:hover .conten-img-cut {
opacity:0;
}
ul.fotos-detail li:hover .conten-img-cut.left {
margin-left: -210px;
}
ul.fotos-detail li:hover .conten-img-cut.right {
margin-left: 210px;
}
ul.fotos-detail li:hover .conten-img-cut.top {
margin-top: -180px;
}
ul.fotos-detail li:hover .conten-img-cut.bottom {
margin-top: 180px;
}
.texto-content {
-moz-transition: all 200ms ease-in-out 500ms;
-ms-transition: all 200ms ease-in-out 500ms;
-o-transition: all 200ms ease-in-out 500ms;
-webkit-transition: all 200ms ease-in-out 500ms;
transition: all 200ms ease-in-out 500ms;
color: #555555;
font-family: Arial,Helvetica;
font-size: 12px;
height: 170px;
padding: 5px;
position: absolute;
line-height: 1.3;
top: 0;
width: 200px;
opacity: 0;
z-index: 5;
}
ul.fotos-detail li:hover .texto-content {
opacity: 1;
}
Abrimos el fotos.css y borramos estas lineas
.fotos-detail li {
border-bottom: 1px dotted #CCCCCC;
float: left;
font-size: 12px;
margin: 0 5px;
padding: 5px 0;
width: 318px;
}
.fotos-detail .avatar-box {
float: left;
margin-right: 10px;
}
.fotos-detail .notification-info {
float: left;
width: 190px;
}
.fotos-detail li a {
color: #116FCF;
font-weight: bold;
}
Ahora abrimos el m.fotos_home_content.tpl y buscamos
<ul class="fotos-detail listado-content">
{foreach from=$tsLastFotos.data item=f}
<li>
<div class="avatar-box" style="z-index: 99;">
<a href="{$tsConfig.url}/fotos/{$f.user_name}/{$f.foto_id}/{$f.f_title|seo}.html">
<img height="100" width="100" {if $f.f_status != 0 || $f.user_activo == 0 || $f.user_baneado == 1}class="qtip" title="{if $f.f_status == 2}Imagen eliminada{elseif $f.f_status == 1}Imagen oculta por acumulación de denuncias{elseif $f.user_activo == 0}La cuenta del usuario está desactivada{elseif $f.user_baneado == 1}La cuenta del usuario está suspendida{/if}" style="border: 1px solid {if $f.f_status == 2}rosyBrown{elseif $f.f_status == 1}coral{elseif $f.user_activo == 0}brown{elseif $f.user_baneado == 1}orange{/if};opacity: 0.5;filter: alpha(opacity=50);"{/if} src="{$f.f_url}"/>
</a>
</div>
<div class="notification-info">
<span>
<a href="{$tsConfig.url}/fotos/{$f.user_name}/{$f.foto_id}/{$f.f_title|seo}.html">{$f.f_title}</a><br />
<span title="{$f.f_date|date_format:"%d.%m.%y a las %H:%M hs."}" class="time"><strong>{$f.f_date|date_format:"%d.%m.%Y"}</strong> - Por <a href="{$tsConfig.url}/perfil/{$f.user_name}">{$f.user_name}</a></span><hr />
<span class="time">{$f.f_description|truncate:94}</span>
</span>
</div>
</li>
{/foreach}
</ul>
Y lo Reemplazamos por
<ul class="fotos-detail">
{foreach from=$tsLastFotos.data item=f}
<li>
<a href="{$tsConfig.url}/fotos/{$f.user_name}/{$f.foto_id}/{$f.f_title|seo}.html">
<div class="img-box-corte-fotos">
<div class="conten-img-cut left">
<img border="0" src="{$f.f_url}">
</div>
<div class="texto-content">
{$f.f_description|truncate:94}
</div>
<div class="notification-info">
<span class="title-ff">{$f.f_title}</span>
<span>{$f.f_date|date_format:"%d.%m.%y a las %H:%M hs."} - Por {$f.user_name} </span>
</div>
</div>
</a>
</li>
{/foreach}
</ul>
No hay comentarios:
Publicar un comentario