GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Estilo de Imágenes en CSS

Mediante CSS podemos definir estilos a las imágenes en la Web.

Imágenes redondeadas
Utilice la propiedad border-radius para crear imágenes redondeadas:

/* imágenes esquinas redondeadas*/

img {
border-radius: 8px;
}

Ver: Código 330.html

/* imágenes circulares*/
img {
border-radius: 8px;
}

Ver: Código 331.html

Las imágenes en miniatura

Utilice la propiedad border para crear imágenes en miniatura.

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="imagenes/colonia.jpg" alt="Paris">

Ver: Código 332.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Utilice la propiedad border para crear imágenes en miniatura con enlace.

img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>

Ver: Código 333.html

Imágenes Responsivas
Las imágenes responsivas automáticamente se ajustaran al tamaño de la pantalla.
Cambie el tamaño de la ventana del navegador para ver el efecto:

img {
max-width: 100%;
height: auto;
}

Ver: Código 334.html

Centrar una imagen

Para centrar una imagen con ajuste a la izquierda y derecha, usamos margen automático y lo
convertimos en un elemento block:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Ver: Código 335.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Imagen Transparente
La propiedad opacity puede tener valores comprendidos entre 0,0 - 1,0. El valor más bajo, es el
más transparente:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

Ver: Código 336.html

Texto en la Imagen
Cómo colocar texto en una imagen:

/* texto arriba izquierda*/

.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}

Ver: Código 337.html

Filtros de Imágenes en CSS

La Propiedad filter en CSS permite el establecimiento de efectos visuales (como la falta de
definición y saturación) a un elemento.
Nota: La propiedad de filtro no es compatible con Internet Explorer, Edge 12, o Safari 5.1 y
anteriores.

Cambiar el color de todas las imágenes en blanco y negro (100% de gris):

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

Ver: Código 338.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Superposición de Elementos a las

Imágenes
Crear un efecto de superposición:

/* Desvanecer Imagen Aparecer Texto */

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
backgroung-color: #008CBA;
}

Ver: Código 339.html

/* Desvanecer Imagen Aparecer Caja */

.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}

Ver: Código 340.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/* Desvanecer Imagen Deslizar Texto de Arriba */

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 0;
width: 100%;
overflow: hidden;
transition: .5s ease;
backgroung-color: #008CBA;
}

Ver: Código 341.html

/* Desvanecer Imagen Deslizar Texto de Abajo */

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
width: 100%;
overflow: hidden;
transition: .5s ease;
backgroung-color: #008CBA;
}

Ver: Código 342.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/* Desvanecer Imagen Deslizar Texto de la Izquierda */

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 0;
overflow: hidden;
transition: .5s ease;
backgroung-color: #008CBA;
}

Ver: Código 343.html

/* Desvanecer Imagen Deslizar Texto de la Derecha */

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
height: 100%;
width: 0;
overflow: hidden;
transition: .5s ease;
backgroung-color: #008CBA;
}

Ver: Código 344.html

Voltear una imagen

img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}

Ver: Código 345.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Galería de imágenes Responsivas

CSS se puede utilizar para crear galerías de imágenes. En el siguiente ejemplo preguntamos a los
medios o dispositivos su resolución para poder organizar las imágenes para diferentes tamaños de
pantalla. Cambie el tamaño de la ventana del navegador para ver el efecto:

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px){

.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px){

.responsive {
width: 100%;
}
}

Ver: Código 346.html

Imagen Modal (Avanzado)

Este es un ejemplo para demostrar cómo CSS y JavaScript pueden trabajar juntos.

En primer lugar, utiliza CSS para crear una ventana modal (cuadro de diálogo) que se esconden por
defecto. Luego, utiliza un JavaScript para mostrar la ventana modal y para mostrar la imagen en el
interior de la ventana modal, cuando un usuario hace clic en la imagen:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px){

.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px){

.responsive {
width: 100%;
}
}

Ver: Código 347.html