diff --git b/index.html a/index.html new file mode 100644 index 0000000..282b0f3 --- /dev/null +++ a/index.html @@ -0,0 +1,42 @@ + + + + + + + + + Tarea De HTML y CSS + + + +
+ +
+
+ Pinguino +
+ +
+ Pinguino +
+ +
+ Pinguino + +
+ +
+ Pinguino + +
+ +
+ Pinguino +
+
+ +
+ + + \ No newline at end of file diff --git b/styles.css a/styles.css new file mode 100644 index 0000000..fd8b1fe --- /dev/null +++ a/styles.css @@ -0,0 +1,91 @@ +body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.mainContainer { + background-color: aqua; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + +} + +.imageContainer { + background-color: red; + width: 40%; + height: 70%; + border: 2px solid rgb(0, 0, 0); + display: flex; + /* justify-content: space-around; + align-items: center; */ + position: relative; + /* border: ; */ +} + +.miniImageContainer { + width: 19%; + height: 19%; + border: 2px solid rgb(96, 49, 175); +} + +.miniImageContainer:hover { + border: 2px solid rgb(29, 218, 108); +} + +.z1:hover ~ div { + visibility: hidden; +} + +.z2:hover ~ div { + visibility: hidden; +} + +.z3:hover ~ div { + visibility: hidden; +} + +.z4:hover ~ div { + visibility: hidden; +} + +.z1 { + position: absolute; + top: 8%; + left: 8%; +} + +.z2 { + position: absolute; + top: 24%; + left: 24%; +} + +.z3 { + position: absolute; + top: 40%; + left: 40%; +} + +.z4 { + position: absolute; + top: 56%; + left: 56%; +} + +.z5 { + position: absolute; + top: 72%; + left: 72%; +} + +.miniImageContainer img { + width: 100%; + height: 100%; + +} + +/* Visibility: hidden Ocultar */ \ No newline at end of file