Editar CSS de un Coverflow

[eCharles]

Hola, encontré este tuto para hacer un efecto coverflow sobre imágenes:
[URL="http://www.tutosytips.com/efecto-coverflow-con-css"]http://www.tutosytips.com/efecto-coverflow-con-css[/URL]
pero necesito aplicar este efecto únicamente a un determinado grupo de imágenes, no a todas las imágenes en mi web que está en plataforma Jimdo (de paga)-

Agradeceré mucho a quien me reedite el css para aplicar únicamente a un determinado grupo de imágenes que llamaría "navegacion-productos"

Saludos

[pzin]

Sólo tienes que aplicarle los selectores que te hagan falta. Vamos, más simple que eso es casi sólo copiar el código.

http://librosweb.es/css/capitulo_2/s...s_basicos.html

Saludos.

[eCharles]

Ya se que tengo que hacerle un class, por eso dije que me gustaría llamarle "navegacion-productos" o solo "productos" da igual, pero....
No se cómo hacerlo, segun leo en el libro que me enviaste el ejemplo es muy básico, no se cómo aplicarlo a tooodo el css

¿así, y ya? Pues ¡claro que no!

???

Código CSS:

.productos
{
    height: 160px;
    margin: 60px auto;
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -ms-perspective: 500px;
    -o-perspective: 500px;
    width: 525px;
}
 
Ó
 
.productos
ul
{
    height: 160px;
    margin: 60px auto;
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -ms-perspective: 500px;
    -o-perspective: 500px;
    width: 525px;
}
 
.productos
ul li {
    background-color: #222;
    display: inline-block;
    margin-right: -25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    height: 165px;
    list-style: none;
    text-align: center;
    transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    padding: 10px;
    position: relative;
    width: 112px;
    z-index: 50;
}
 

????????????????????????????

Código CSS:

.productos
ul
{
    height: 160px;
    margin: 60px auto;
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -ms-perspective: 500px;
    -o-perspective: 500px;
    width: 525px;
}
 
ul li {
    background-color: #222;
    display: inline-block;
    margin-right: -25px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    height: 165px;
    list-style: none;
    text-align: center;
    transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    -o-transition: all ease .5s;
    padding: 10px;
    position: relative;
    width: 112px;
    z-index: 50;
}
 
li p {
    color:#ddd;
    font-size: .9em;
    margin: 4px 0 13px;
}
 
ul li a.boton {
    background-color: #222222;
    border-radius: 2px 2px 2px 2px;
    bottom: 5px;
    color: #FFFFFF;
    font-size: 1em;
    padding: 0.5em;
    right: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 1s ease 0s;
    -webkit-transition: background-color 1s ease 0s;
    -moz-transition: background-color 1s ease 0s;
    -o-transition: background-color 1s ease 0s;
}
ul li a.boton:hover {
   color: #222222;
}
 
ul li img {
    height: auto !important;
    width: 93px !important;
}
 
ul li:nth-child(3) {
    background-color: #222222;
    transform: rotateY(0deg) scale(1.22);
    -webkit-transform: rotateY(0deg) scale(1.22);
    -moz-transform: rotateY(0deg) scale(1.22);
    -o-transform: rotateY(0deg) scale(1.22);
    z-index: 55;
}
 ul li:nth-child(3) a.boton {
    background-color: #0099CC;
}
 ul li:nth-child(3) ~ li {
    transform: rotateY(-45deg);
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
}
 ul li:last-child,  ul li:first-child {
    z-index: 45;
}
 ul:hover li:not(:hover) {
    background-color: #111111;
    transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -ms-transform: rotateY(45deg);
}
 ul:hover li a.boton {
    background-color: #222222;
}
 ul li:hover,  ul li:first-child:hover,  ul li:nth-child(3) ~ li:hover {
     background-color: #222;
     transform: rotateY(0) scale(1.22);
     -webkit-transform: rotateY(0) scale(1.22);
     -moz-transform: rotateY(0) scale(1.22);
     -ms-transform: rotateY(0) scale(1.22);
     -o-transform: rotateY(0) scale(1.22);
     z-index: 60;
}
 ul:hover li:hover a.boton {
    background-color: #0099CC;
}
 ul:hover li:hover ~ li {
    transform: rotateY(-45deg);
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
}
 

[pzin]

Claro, el ejemplo es básico porque es algo muy básico.

Tu primer selector te valdría si lo replicaras al resto. Realmente sólo tendrías que poner la clase delante y en el HTML meter ese código dentro de un elemento cuya clase sea esa. O también puedes añadir una clase a al elemento de la lista, que sería más correcto, ya que no alades elementos extra al HTML.

ul li por ejemplo selecciona un elemento li que se encuentre dentro de una lista (ul). Y si pones ul.algo li selecciona cualquier elemento li que se encuentre dentro de una lista (ul) que lleve una clase (.) llamada algo.

Usa highlight cuando publiques código.