Creación de un slider de imágenes: Ayuda necesaria

Hola necesito crear un slider en donde muestre 4 imágenes horizontales , en donde cada una deberá ser la imagen en miniatura del post mas reciente, es decir la imagen 1 sera el post mas reciente de la categoría 1, la imagen 2 el post mas reciente de la categoria 2 y asi.

aqui dejo el ejemplo de lo que quiero (lo vi en otra web = (Tecnogeek).

adjunto captura del slider :

http://mundovirtuals.hol.es/wp-content/uploads/2014/02/Sin-título.jpg

Ayuda please..

No es un slider

Debes hacer una consulta a la bd de los cuatro ultimos posts y lo demas armarlo con css

<style>
.item {
width: 255px;
height: 150px;
position:relative;
float:left;
}

.item img {
width:100%;
height:100%;
}

.item .title {
position:absolute;
bottom:0;
width:100%;
left:0;
background:rgba(0,0,0,0.3);
color:#FFF;
font-size:14px;
font-weight:bold;
}

</style>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div style="clear:both"></div>

Te armé algo sencillo pero igual qué como se ve en ese sitio, luego tu lo mejoras u optimizas a tu medida saludos !

---------- Post agregado el 17-feb-2014 hora: 02:02 ----------

arevaloemiliano dijo:

No es un slider

Debes hacer una consulta a la bd de los cuatro ultimos posts y lo demas armarlo con css

<style>
.item {
width: 255px;
height: 150px;
position:relative;
float:left;
}

.item img {
width:100%;
height:100%;
}

.item .title {
position:absolute;
bottom:0;
width:100%;
left:0;
background:rgba(0,0,0,0.3);
color:#FFF;
font-size:14px;
font-weight:bold;
}

</style>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div class="item">
<img src="URL DE LA IMAGEN">
<div class="title">Titulo del articulo</div>
</div>

<div style="clear:both"></div>

Te armé algo sencillo pero igual qué como se ve en ese sitio, luego tu lo mejoras u optimizas a tu medida saludos !

Hacer clic para expandir...

Olvide decirte que puedes ponerle un padding al .title pero luego agregale un box-sizing:border-box asi no se sale del div

Gracias, de verdad que la estructura quedo igual a la de la imagen, si no usara wordpress solo le añadiria los link al titulo e imagen en donde consultara la tabla y contenido que quisiera mostrar, pero uso wordpress y necesito que al hacer click me mande al post mas reciente de cierta categoria y que en donde va la imagen tambien me muestre la imagen minitura (thumball) de dicho post.

Sabrias como hacer esto y aplicarlo a wordpress,