Problemas con una transition css3  

 
Guillermo
 Guillermo
Usuario eminente

Buenas tardes llevo ya un tiempo con ganas de crear mi estilo css para unas imagenes el problema me surge cundo intento ponerle ha este codigo css:

/* Condicion Basica de cuadrado trasparente interior fotos*/
.caption {
padding: 0px;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
padding: 0px;
height: auto;
display: block;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #000000;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 16px;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
}
.caption:hover:before {
opacity:1;
filter:alpha(opacity=100);
}
/* Final Condicion Basica de cuadrado trasparente interior fotos*/

.overlayone-radius{ /* Propiedades de imagen */
border: 5px solid #fff;
border-radius: 220px;
margin:10px;
text-align:center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 0px;
width: 220px;
height: 220px;
display: inline-block;
position: relative;
}
.overlayinn-radius{ /* Propiedades de la transparencia */
background-color: rgba(0, 0, 0, 0.6);
padding: 0px 1px; 
width: 180px; /* ancho del contenedor de texto */
height: 180px; /* alto del contenedor de texto */
border-radius: 50%; /* Tama単o del circulo */
opacity: 0; /* esta condicion mantiene el texto oculto */
top: 0px; /*distancia hacia abajo*/
rigth: 0px; /*distancia hacia la derecha*/
position: absolute;
padding: 20px; /* espacio entre texto y bordes */
transition: opacity .5s;
text-align: center; /* texto centrado */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px; /* tama単o de letra */
color:#ffffff; /* color de texto */
}
.overlayinn-radius:hover { /* Efecto al pasar el mouse */
	-webkit-transition: all 3s ease;
	-moz-transition: all 3s ease;
	-o-transition: all 3s ease;
	-ms-transition: all 3s ease;
	transition: all 3s ease;

opacity: 1;
transition: opacity .5s;
}
/* Final Efecto Circulo*/

El siguiente codigo de transition:

transition: 1.5ms ease;
 -webkit-transition: 1.5s ease; /* Firefox */
 -webkit-transition: 1.5s ease; /* Chrome - Safari */
 -o-transition: 1.5s ease; /* Opera */

El codigo html que uso es:

Texto

¿Como podria insertar la transition? :S :S

URL del sitio: Contenido solo visible a usuarios registrados

This topic was modified hace 4 meses por antonio
Citar
Respondido : 15/05/2017 3:31 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

De donde has sacado ese código, tiene errores por ejemplo:

rigth: 0px;

Debe ser right, transition debería ser un clase, es decir .transition, mejor envía la url de donde te estas guiando.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/05/2017 6:48 pm

Cursos Gratuitos WordPress

Guillermo
 Guillermo
Usuario eminente

Este es el archivo solo lo he editado un poco.

ResponderCitar
Respondido : 15/05/2017 6:54 pm
Guillermo
 Guillermo
Usuario eminente

Este es el archivo

ResponderCitar
Respondido : 15/05/2017 6:56 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

No se adjuntó nada, mejor tal como te comenté envía la url.
En tu código html no veo ninguna de las clases que colocas en CSS

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/05/2017 11:19 pm

Por favor Iniciar Sesión o Registro