Uso de una hoja de estilos

Cómo añadir una hoja de estilos para ampliar una imagen

CSS para ampliar la imagen:

img:hover {
    transform: scale(1.5); /* se amplía un 50% */
    transition: all 0.5s;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.25);
}

CSS para que la imagen salga centrada en la página:

.contenedor-imagen {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical (opcional) */
}

Crear un fichero llamado estilos.css en la carpeta css para poner todos los estilos (body, h1, h2, p, etc):

body {
    font-family: 'Lucida Sans', Arial, Geneva, Verdana, sans-serif;
    background-color: #ced4da;
    margin: 0;
    padding: 1rem;
}

h1 {
    background-color: #dee2e6;
    padding: 2rem;
    display: flex;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
    font-size: 1.5rem;
    margin: 0 0 4rem 0;
    svg{
        width: 3rem;
        margin: 0 1rem 0 0;
    }
}

img {
    border-radius: 1rem;
    border: 1px solid #adb5bd;
    max-width: 55dvw;
    transition: all 0.5s;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
}

img:hover {
    transform: scale(1.5); /* se amplía un 50% */
    transition: all 0.5s;
    box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.25);
}

.contenedor-imagen {
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;     /* Centrado vertical (opcional) */
}

Crear la paǵina html y vincular (entre <head> y </head>) la hoja de estilos css/estilos.css:

<link rel="stylesheet" href="css/estilos.css" type="text/css">

poner las imágenes en la carpeta img

añadir la clase contenedor-imagen en cada imagen que se desee ampliar, por ejemplo paisaje.jpg:

 <div class="contenedor-imagen"> 
    <img src="img/paisaje.jpg" style="width: 590px; height: 393px;"alt="Paisaje">
</div>

Código de la página html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/estilos.css" type="text/css">
    <title>Ejercicio</title>
  </head>
  <body>
    <h1>Cómo poner estilos en una imagen</h1>
    <p>El fichero de la imagen es paisaje.jpg y está en la carpeta img</p>
    <p>El fichero de estilos es estilos.css y está en la carpeta css</p>
    <br />
    <br />
    <div class="contenedor-imagen"> 
        <img src="img/paisaje.jpg" style="width: 590px; height: 393px;"alt="Paisaje">
    </div>
  </body>
</html>

Resultado:

Descarga de ficheros

Deja una respuesta