Ayuda con este visor de imágenes

Hola, soy nuevo, y me gustaría que me ayudaseis a poner lo siguiente en mi página web que está en construcción. En el ejemplo de la siguiente página web aparece muy bonito, pero a la hora de ponerlo todo cambia. El texto que aparece debajo, encima, a la derecha o a la izquierda de la imagen, me aparece pegado a los bordes de la pantalla o arriba de todo de la web y las imágenes una debajo de otra. Necesito ayuda, ya que estoy empezando y me gustaría meter ese estilo en mi web. Aquí os dejo el enlace:

http://www.dynamicdrive.com/style/csslibrary/item/image_with_slidin…

Gracias de antemano!

bien, ahora dinos que es lo que tienes tu,
danos la url para verlo

saludos

La web está en proceso de creación, aún no está colgada. Lo que quiero es ponerlo tal y como aparece es esa dirección, pero no encuentro la forma. Queda como expliqué en el post anterior.

Hola, muy bueno el efecto para las imágenes. Las instrucciones de uso están dadas ahí mismo. Debes copiar y pegar el código señalado.
Creas un nuevo HTML y entre HEAD y HEAD copia y pega esto:

<style>

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto;  /* reset from default */
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide{
width: 150px;  /* reset from default */
top:15px;
left:0;
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide{
top:0;
bottom:auto;  /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}

</style>

Y luego de la etiqueta Body lo siguiente:

<!-- Make sure each container contains explicit width/height attrs that reflect the dimensions of the showcased image-->

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

<br />

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc rightslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

<br />

<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc upslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

<br />

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc leftslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

Guardas tu html, presivisualisas y Voilá...Saludos

Eso ya lo hice, El problemas es que queda así incluso en el prototipo de la web. Este es un ejemplo para que veáis como queda.

¿No sabe nadie?

Con que navegador lo estás viendo ? no es para todos, menos para IE... Je, je.

Lo abro con Mozilla Firefox, Chrome, e incluso probé con Opera, y siempre se ve igual...

¿Alguna respuesta?

¿Nadie sabría decirme como se pone el visor de imágenes bien? A ver si alguien me puede ayudar antes del Lunes, si no so sé que puedo hacer...

<html>
<head>
<style>


.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}


.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}


.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}


.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}


.imagepluscontainer div.desc a{
color: white;
}


.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}


/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/


.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto;  /* reset from default */
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}


.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}


/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/


.imagepluscontainer div.leftslide{
width: 150px;  /* reset from default */
top:15px;
left:0;
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}


.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}


/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/


.imagepluscontainer div.upslide{
top:0;
bottom:auto;  /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}


.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}


</style>
</head>
<body>
<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="http://dynamicdrive.com/dynamicindex14/stadium.jpg">
<div class="desc">
Este texto se verá abajo de la imagen
</div>
</div>
</body>
</html>

A mí eso me ha funcionado bien :D

Sigo sin enterarme muy bien, Doodleo, ¿cómo hiciste? Hay dos códigos, uno para la hoja de estilo, y otro para el html, ¿cómo hiciste para que se te vea bien de esa forma? ¿Eso quiere decir que no necesito el código para la hoja de estilo? Vaya lío me estoy haciendo. Por cierto gracias por ese código, espero que me puedas ayudar ahora con esta nueva pregunta. ¡Un saludo paisano!

Los estilos CSS de una página puedes definirlos en un archivo a parte (la hoja de estilos, con extensión .css) y enlazarla desde tu página, o poner los estilos sin usar un archivo a parte (Esto no es lo recomendable pues el código te quedará más desordenado). Simplemente pon esto en tu archivo css:

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}




.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}




.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}




.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}




.imagepluscontainer div.desc a{
color: white;
}




.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}




/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/




.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto;  /* reset from default */
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}




.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}




/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/




.imagepluscontainer div.leftslide{
width: 150px;  /* reset from default */
top:15px;
left:0;
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}




.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}




/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/




.imagepluscontainer div.upslide{
top:0;
bottom:auto;  /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}




.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}

Y donde quieras mostrar las imágenes en tu página, lo haces de la siguiente manera:

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2"><img src="[B][COLOR=#ff0000]URL DE LA IMAGEN A MOSTRAR[/COLOR][/B]"><div class="desc">[COLOR=#ff0000][B]TEXTO A MOSTRAR[/B][/COLOR]</div></div>