En este artículo, aprenderemos cómo crear un tipo de efecto de desplazamiento sobre una imagen para obtener su detalle completo. Esto se puede lograr usando HTML y CSS simples.
Resumen de nuestro proyecto:
Acercarse:
- Primero crearemos un archivo HTML en el que agregaremos una imagen para nuestro colgador de imágenes.
- Luego crearemos un estilo CSS para dar efectos de animación al elemento que contiene la imagen.
Comenzaremos definiendo las secciones HTML y CSS de la página como se indica a continuación.
Sección HTML: En esta sección se define la estructura de la página.
- Primero crearemos un archivo HTML.
- Luego vamos a escribir el código repetitivo requerido para una página HTML.
- A continuación, vincularemos el archivo CSS o agregaremos directamente el CSS requerido que proporciona todos los efectos de animación.
- En la sección del cuerpo, agregaremos una fuente de imagen para que podamos mostrar nuestra imagen.
index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>hover over gfg logo --)</h1> <div class="main_box"> <div class="circle"></div> <div class="content"> <h2>GeeksForGeeks</h2> <br> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and much more.. </p> <br> <a href="#">Contact Us</a> </div> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"> </div> </body> </html>
Sección CSS: En esta sección definiremos el CSS de la página. Usando CSS le daremos diferentes tipos de animaciones y efectos
a nuestra página HTML para que se vea interactiva para todos los usuarios.
- Primero restableceremos todos los efectos del navegador para que todo sea consistente en todos los navegadores.
- Luego definiremos el estilo que se le dará a los elementos que incluyen el tamaño y la posición.
- Usaremos la función clip-path para dar formas específicas a nuestros objetos.
style.css
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: #000;
}
body{
background-color: rgb(71, 69, 69);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.main_box{
position: relative;
width: 42em;
height: 25em;
display: flex;
align-items: center;
border-radius: 1.5em;
transition: .5s;
}
.main_box .circle{
position: absolute;
top: 6%;
left: 0;
width: 100%;
height: 100%;
border-radius: 1.5em;
overflow: hidden;
}
.main_box .circle::before{
content: '';
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
clip-path: circle(7.5em at center);
transition: .4s;
}
h1{
margin-right: 1em ;
}
.main_box:hover .circle::before{
clip-path: circle(30em at center);
background: rgb(20, 220, 43);
}
.main_box img{
top: 50%;
left: 50%;
height: 5.75em;
transform: translate(-50%,-50%);
position: absolute;
pointer-events: none;
transition: 0.4s;
}
.main_box:hover img{
left: 80%;
top: 12.25em;
height: 10em;
}
.main_box .content{
position: relative;
width: 50%;
background: rgb(20, 220, 43);
padding: 1.25em 1.25em 1.25em 2.5em;
transition: .5s;
opacity: 0;
visibility: hidden;
}
.main_box:hover .content{
left: 10%;
opacity: 1;
visibility: visible;
}
.main_box .content h2{
text-transform: uppercase;
font-size: 2em;
line-height: 1em;
}
.main_box .content p{
color: #fff;
}
.main_box .content a{
position: relative;
text-decoration: none;
color: rgb(186, 14, 14);
padding: .6em 1.25em;
margin-top: 0.6em;
display: inline-block;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA