Skip to content

T
tarea_hrml_css
Switch branch/tag
Find file
Normal viewHistoryPermalink
ejercicio1.html 2.07 KB
Newer Older
tarea
cfb620ac
 
Angel Zarate committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <section class="imagenes">
        <div class="foto1 fotoTamaño">
          <img
            src="http://placekitten.com/200/200"
            alt="fotogatito"
            class="fotoActual"
          /><br />
        </div>
        <div class="foto2 fotoTamaño">
          <img src="http://placekitten.com/200/200" alt="fotogatito" /><br />
        </div>
        <div class="foto3 fotoTamaño">
          <img src="http://placekitten.com/200/200" alt="fotogatito" /><br />
        </div>
        <div class="foto4 fotoTamaño">
          <img src="http://placekitten.com/200/200" alt="fotogatito" /><br />
        </div>
        <div class="foto5 fotoTamaño">
          <img src="http://placekitten.com/200/200" alt="fotogatito" /><br />
        </div>
      </section>
    </main>
  </body>
</html>
<style>
  main {
    background-color: chartreuse;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }

  .imagenes {
    width: 70%;
    height: 70%;
    background-color: black;
    position: relative;
  }

  .fotoTamaño {
    width: 20%;
    height: 20%;
  }
  img {
    width: 100%;
    height: 100%;
  }

  .foto1:hover ~ div {
    visibility: hidden;
  }
  .foto2:hover ~ div {
    visibility: hidden;
  }

  .foto3:hover ~ div {
    visibility: hidden;
    border: 1rem;
    color: aqua;
  }

  .foto4:hover ~ div {
    visibility: hidden;
  }
  .foto2 {
    position: absolute;
    left: 100px;
    top: 50px;
  }

  .foto3 {
    position: absolute;
    left: 190px;
    top: 120px;
  }

  .foto4 {
    position: absolute;
    left: 280px;
    top: 200px;
    border: 40px;
    color: brown;
  }

  .foto5 {
    position: absolute;
    left: 350px;
    top: 300px;
  }
</style>