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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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