Foro de elhacker.net

Hola.


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

(https://i.imgur.com/1xySDzg.jpg)


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


> https://zerospoker.com



Gracias.

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

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

OK.

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.

#idElemento {
  position: absolute;
  left: 3vw;
  top: 62vw;
  margin: 4vw auto;
  font-size: 3vw;
  border-top: 1vw solid rgba(255, 255, 255, 0.2);
  border-right: 1vw solid rgba(255, 255, 255, 0.2);
  border-bottom: 1vw solid rgba(255, 255, 255, 0.2);
  border-left: 1vw solid #ffffff;
  display: block;
  border-radius: 1vw;
  padding: 4vw 4vw;
  cursor: pointer;
  color: #fff;
  background-color: rgba(0, 7,90,0.7);
  font-family: 'Roboto';
  border: 0.5vw solid #fff;
  box-shadow: 0.8vw 1.2vw 1.2vw #678;
  width: 60vw;
  height: 12vw;
  outline: none;
  transition-duration: 1.6s;
  -webkit-transition-duration: 1.6s;
  -moz-transition-duration: 1.6s;
 
}
 
 
#idElemento:hover, #idElemento:after {
  position: fixed;
  border: 0;
  width: 20vw;
  height: 10vw;
  font-size: 0;
  outline: none;
  border-radius: 100%;
  background-color: transparent;
  background-image: linear-gradient(to right, rgba(0 ,4 , 56 , 0.4), rgba(0, 4, 56,0.8));
  left: 78.5vw;
  top: 117vw;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 0.1s infinite linear;
  animation: load8 0.1s infinite linear;
  box-shadow: none;
}
 
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}[/quote]
 
En la web de W3schools tienen snippets de galerías y demás. Igual te interesan.
 
https://www.w3schools.com/w3css/w3css_modal.asp
 
Ve pinchando en las imágenes para ver el modal abierto.
Hay UN MOOONTOOON de ejemplos por ahí. Están muy chulos!

Gracias por el aporte.