elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] ¿Cómo Hacer...?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] ¿Cómo Hacer...?  (Leído 3,024 veces)
B€T€B€


Desconectado Desconectado

Mensajes: 2.697


"A Dios lo que es de Dios; y al César lo que es.."


Ver Perfil
[Resuelto] ¿Cómo Hacer...?
« en: 22 Enero 2020, 22:19 pm »

Hola.


¿Cómo se puede lograr este efecto (creando una página web)?




Al situar el ratón sobre una imagen esta se acerca/agranda.


> https://zerospoker.com



Gracias.



« Última modificación: 23 Febrero 2020, 00:00 am por #!drvy » En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: ¿Cómo Hacer...?
« Respuesta #1 en: 22 Enero 2020, 22:25 pm »

css, hover, transform y scale


https://www.w3schools.com/howto/howto_css_zoom_hover.asp

es bastante simple y el css lo hace basicamente solo, transform se puede usar basicamente para cualquier cambio de apariencia, aunque no es bueno con colores


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
B€T€B€


Desconectado Desconectado

Mensajes: 2.697


"A Dios lo que es de Dios; y al César lo que es.."


Ver Perfil
Re: ¿Cómo Hacer...?
« Respuesta #2 en: 22 Enero 2020, 22:27 pm »



Picar código no es lo mío, utilizo Macromedia Dreamweaver...

En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: ¿Cómo Hacer...?
« Respuesta #3 en: 22 Enero 2020, 22:40 pm »


Picar código no es lo mío, utilizo Macromedia Dreamweaver...



que haces con dw? :s a demas macromedia o adobe? el ultimo de macromedia es 2007 D: dudo que sea compatible con css3 XD

y aunque sea el ultimo... bueno, desde 2007 dudo de su eficacia y utilidad XD

y no es picar codigo... es que vieras el ejemplo, es nativo a css3 y son basicamente 2 lineas de aacciones y un selector

En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
B€T€B€


Desconectado Desconectado

Mensajes: 2.697


"A Dios lo que es de Dios; y al César lo que es.."


Ver Perfil
Re: ¿Cómo Hacer...?
« Respuesta #4 en: 22 Enero 2020, 22:44 pm »



OK.
En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: ¿Cómo Hacer...?
« Respuesta #5 en: 22 Enero 2020, 22:56 pm »


Picar código no es lo mío, utilizo Macromedia Dreamweaver...


Muchas horas me tiré con el Dreamweaver haciendo webs usando diseño gráfico.

Aquí te dejo un ejemplo que hice yo. Básicamente es lo que te dijo EngelLex. A parte tienes un rotate puesto y el evento after. Puedes mandarle a la imagen hacer una vuelta entera a toda hostia 0.0001s así le das un efecto de "selección" que parece que vibra. Se sobra mucho css pero igual te sirve para otras cosas útiles.
Código
  1. #idElemento {
  2.  position: absolute;
  3.  left: 3vw;
  4.  top: 62vw;
  5.  margin: 4vw auto;
  6.  font-size: 3vw;
  7.  border-top: 1vw solid rgba(255, 255, 255, 0.2);
  8.  border-right: 1vw solid rgba(255, 255, 255, 0.2);
  9.  border-bottom: 1vw solid rgba(255, 255, 255, 0.2);
  10.  border-left: 1vw solid #ffffff;
  11.  display: block;
  12.  border-radius: 1vw;
  13.  padding: 4vw 4vw;
  14.  cursor: pointer;
  15.  color: #fff;
  16.  background-color: rgba(0, 7,90,0.7);
  17.  font-family: 'Roboto';
  18.  border: 0.5vw solid #fff;
  19.  box-shadow: 0.8vw 1.2vw 1.2vw #678;
  20.  width: 60vw;
  21.  height: 12vw;
  22.  outline: none;
  23.  transition-duration: 1.6s;
  24.  -webkit-transition-duration: 1.6s;
  25.  -moz-transition-duration: 1.6s;
  26.  
  27. }
  28.  
  29.  
  30. #idElemento:hover, #idElemento:after {
  31.  position: fixed;
  32.  border: 0;
  33.  width: 20vw;
  34.  height: 10vw;
  35.  font-size: 0;
  36.  outline: none;
  37.  border-radius: 100%;
  38.  background-color: transparent;
  39.  background-image: linear-gradient(to right, rgba(0 ,4 , 56 , 0.4), rgba(0, 4, 56,0.8));
  40.  left: 78.5vw;
  41.  top: 117vw;
  42.  -webkit-transform: translateZ(0);
  43.  -ms-transform: translateZ(0);
  44.  transform: translateZ(0);
  45.  -webkit-animation: load8 0.1s infinite linear;
  46.  animation: load8 0.1s infinite linear;
  47.  box-shadow: none;
  48. }
  49.  
  50. @-webkit-keyframes load8 {
  51.  0% {
  52.    -webkit-transform: rotate(0deg);
  53.    transform: rotate(0deg);
  54.  }
  55.  100% {
  56.    -webkit-transform: rotate(360deg);
  57.    transform: rotate(360deg);
  58.  }
  59. }
  60. @keyframes load8 {
  61.  0% {
  62.    -webkit-transform: rotate(0deg);
  63.    transform: rotate(0deg);
  64.  }
  65.  100% {
  66.    -webkit-transform: rotate(360deg);
  67.    transform: rotate(360deg);
  68.  }
  69. }[/quote]
  70.  
  71. En la web de W3schools tienen snippets de galerías y demás. Igual te interesan.
  72.  
  73. https://www.w3schools.com/w3css/w3css_modal.asp
  74.  
  75. Ve pinchando en las imágenes para ver el modal abierto.
  76. Hay UN MOOONTOOON de ejemplos por ahí. Están muy chulos!
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

B€T€B€


Desconectado Desconectado

Mensajes: 2.697


"A Dios lo que es de Dios; y al César lo que es.."


Ver Perfil
Re: ¿Cómo Hacer...?
« Respuesta #6 en: 22 Enero 2020, 23:01 pm »



Gracias por el aporte.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines