Ver Mensaje Individual
  #4 (permalink)  
Antiguo 31/10/2017, 12:03
Avatar de Rafael
Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Esto no tiene sentido, es un fallo en css? :S

Efectivamente, el código está al revés. Lo que puedes hacer para no meter javascript es poner un div vacío después del boton.

Código HTML:
Ver original
  1. <input id="btnG"><div></div>

Como ya le has asignado un name a tu boton, uso el mismo como id.

Entonces ya nos evitamos class adicionales y podemos ponerle estilo al div

Código CSS:
Ver original
  1. #btnG+div {
  2.   z-index: -1; position: relative;  left:-25px; top:-38px;}
  3.  
  4. #btnG:hover+div {
  5.   transform: scale(1.1, 1.1);
  6.   transition: all .3s ease-in-out;}

Eso es el truco, lo demás es para darle forma. Revísalo funcionando acá: https://jsfiddle.net/8ojub75u/3/