Estilos a Imágenes CSS

Aprendiendo a dar estilos a las imágenes:

Imágenes Redondeadas

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

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

Imágenes Miniatura

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

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

Como 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="paisaje.jpg">
  <img src="paisaje.jpg" alt="Paisaje">
</a>

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

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: 10px 20px; 
}

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.

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Para IE8 y anteriores */
}

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;
}

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%):

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

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

Muestras de otros filtros de imágenes:

Superposición de Imágenes

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

Voltear Imágenes

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

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";
}