Estilos a Imágenes CSS

Dar estilos a imágenes con hojas de estilos CSS es bastante productivo, ya que se cuentan diferentes propiedades aplicables a las etiquetas de imagen HTML y con un poco de creatividad es posible dar visibilidad y efectos de acuerdo a nuestras necesidades.

Imágenes Redondeadas

La propiedad border-radius es utilizada para crear imágenes redondeadas:

Código CSS:

img1 {
  border-radius: 8px;
}
img2 {
  border-radius: 50%;
}

Muestra:

Imágenes Miniatura

Para crear imágenes en miniatura o también llamadas Thumbnails, se utilizar la propiedad border en las imágenes:

Código CSS:

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

Si se desea un efecto de cuando se posiciona el cursor del mouse sobre la imagen, agregar el siguiente código CSS:

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

Muestra:

Imágenes Responsivas

Las imágenes Responsivas se ajustan automáticamente para ajustarse al ancho de la pantalla (o de su contenedor).

img {
  width: 100%;
}

Si se desea que la imagen se reduzca de tamaño si es necesario, pero que no sea mayor al tamaño original agregue lo siguiente:

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

Imágenes Centradas

Para centrar una imagen, se especifica el margen izquierdo y derecho como auto y se convierte en un elemento de bloque:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Imágenes Polaroid

Imágenes tipo Polaroid

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
img {
  width: 100%;
}
div.contenedor {
  text-align: center;
  padding: 20px; 
}

Título de la Imagen

Imágenes Transparentes

La propiedad opacity puede tomar el valor de 0.0 a 1.0. El valor menor es transparente:

Nota: Para Internet Explorer 8 y anteriores se debe usar filter:alpha(opacity=x). El valor de x toma de 0 a 100, siendo el valor menor el más transparente.

img0 {
  opacity: 1.0;
  filter: alpha(opacity=50); /* Para IE8 y anteriores */
}
img1 {
  opacity: 0.5;
}
img2 {
  opacity: 0.2;
}

Texto en Imágenes

Como posicionar texto en imágenes:

.container {
  position: relative;
}
.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}
.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}
.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}

Izquierda Superior Derecha Superior Izquierda Inferior Derecha Inferior Centrado

Filtros de Imágenes

La propiedad filter del CSS agrega efectos visuales a un elemento (como desenfoque y saturación).

En el siguiente ejemplo se cambia el color de todas las imágenes de oscuro a blanco (gris 100%):

.img0 { filter: none; }
.img1 { filter: blur(5px); }
.img2 { filter: brightness(200%); }
.img3 { filter: contrast(200%); }
.img4 { filter: grayscale(100%); }
.img5 { filter: hue-rotate(90deg); }
.img6 { filter: invert(100%); }
.img7 { filter: opacity(30%); }
.img8 { filter: saturate(8); }
.img9 { filter: sepia(100%); }

Muestras:

Nota: La propiedad filter no es soportada por Internet Explorer, Edge 12 o Safari 5.1 y sus versiones anteriores.

Superposición de Imágenes

Crear un efecto de superposición cuando se sobrepone el cursor del mouse.

Código CSS:

.contenedor {
  position: relative;
  width: 250px;
  max-width: 100%;
}
.img0 {
  display: block;
  width: 100%;
  heigth: auto;
}
.cubierta {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}
.contenedor:hover .cubierta {
  opacity: 1;
}
.texto {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

Muestra:

Título o Texto

Voltear Imágenes

Voltear imágenes cuando se sobrepone el cursor del mouse.

Código CSS:

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

Galerías de Imágenes Responsivas

Se puede usar el CSS para crear galerías de imágenes. En el siguiente ejemplo se usan los media queries para reajustar las imágenes en diferentes tamaños de pantalla.

.responsivo {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsivo {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsivo {
    width: 100%;
  }
}

Imagen Modal

Este es un ejemplo para demostrar como CSS y JavaScript pueden trabajar juntos.

Primero, con CSS se crea una ventana modal (o caja de dialogo), y hacerlo oculto predeterminadamente. Después, cuando el usuario da clic en la imagen actúa el código JavaScript mostrando la ventana modal y se visualiza la imagen dentro del modal. 

// Visible el modal
var modal = document.getElementById('myModal');

// Visible imagen dentro del modal
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Elemento <span> que cierra el modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}