Aprende a diseñar imágenes usando CSS.
Imágenes redondeadas
Utilice la propiedad border-radius para crear imágenes redondeadas:
Ejemplo:
Imagen redondeada:
img {
border-radius: 8px;
}
Ejemplo:
Imagen en un círculo:
img {
border-radius: 50%;
}
Imágenes Thumbnail
Utilice la propiedad de border para crear imágenes en miniatura.
Ejemplo:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
Ejemplo:
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>
Imágenes responsive
Las imágenes responsive se ajustarán automáticamente para adaptarse al tamaño de la pantalla.
Cambie el tamaño de la ventana del navegador para ver el efecto:
Si deseas que una imagen se reduzca si es necesario, pero nunca se amplíe para que sea más grande que su tamaño original, agregue lo siguiente:
Ejemplo:
img {
max-width: 100%;
height: auto;
}
Nota: Obtén más información sobre el diseño web responsive en nuestro tutorial CSS RWD.
Centrar una imagen
Para centrar una imagen, establezca el margen izquierdo y derecho en auto y conviértalo en un elemento de bloque:
Ejemplo:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Imágenes/Tarjetas Polaroid
Ejemplo de imágenes y tarjetas modo polaroid.
Ejemplo:
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.container {
text-align: center;
padding: 10px 20px;
}
Imagen transparente
La propiedad opacity puede tomar un valor de 0.0 - 1.0. Cuanto menor sea el valor, más transparente:
Ejemplo:
img {
opacity: 0.5;
}
Imagen texto
Cómo colocar texto en una imagen:
Ejemplo:
Arriba a la izquierda
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
Ejemplo:
Abajo a la izquierda
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
Ejemplo:
Arriba a la derecha
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
Ejemplo:
Abajo a la derecha
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
Ejemplo:
Centrado
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
Filtros de imagen
La propiedad filter CSS agrega efectos visuales (como desenfoque y saturación) a un elemento.
Nota: La propiedad filter no es compatible con Internet Explorer o Edge 12.
Ejemplo:
Cambia el color de todas las imágenes a blanco y negro (100% gris):
img {
filter: grayscale(100%);
}
Imagen Hover Overlay
Cree un efecto de superposición al pasar el mouse:
Ejemplo:
Desvanecer en el texto:
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Ejemplo:
Deslice hacia adentro (arriba):
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Ejemplo:
Deslice hacia adentro (izquierda):
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Ejemplo:
Desvanecerse en una caja:
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
Ejemplo:
Deslice hacia adentro (abajo):
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Ejemplo:
Deslice hacia adentro (derecha):
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Voltear una imagen
Mueve el mouse sobre la imagen:
Ejemplo:
img:hover {
transform: scaleX(-1);
}
Galería de imágenes responsive
CSS se puede utilizar para crear galerías de imágenes. Este ejemplo utiliza media queries para reorganizar las imágenes en diferentes tamaños de pantalla. Cambie el tamaño de la ventana del navegador para ver el efecto:
Ejemplo:
.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%;
}
}
Imagen modal (avanzado)
Este es un ejemplo para demostrar cómo CSS y JavaScript pueden funcionar juntos.
Primero, use CSS para crear una ventana modal (cuadro de diálogo) y ocúltela de forma predeterminada.
Luego, use JavaScript para mostrar la ventana modal y mostrar la imagen dentro del modal, cuando un usuario haga clic en la imagen:
Ejemplo:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
Traducido con 💚 desde W3Schools.com