Skip to content

T
Tarea_html_css_1
Commit a346e8f5 by Nahuel Mereles Rodriguez
Options

Tarea completada

parents
Showing with 135 additions and 0 deletions
index.html 0 → 100644
<!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">
<link rel="stylesheet" href="styles.css">
<title>Tarea De HTML y CSS</title>
</head>
<body>
<div class="mainContainer">
<div class="imageContainer">
<div class="miniImageContainer z1">
<img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
</div>
<div class="miniImageContainer z2">
<img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
</div>
<div class="miniImageContainer z3">
<img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
</div>
<div class="miniImageContainer z4">
<img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
</div>
<div class="miniImageContainer z5">
<img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
styles.css 0 → 100644
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment