www.state-it.info

Gran base de respuestas a las preguntas de los desarrolladores
Header decor

Como aumentar el bloque cuando pasa?

eellazy 2018-11-06 00:05:32

hola a Todos!
Cómo implementar el aumento del bloque cuando pasa como aquí?
https://www.templatemonster.com/ru/

Al situar el bloque con el producto aumenta y cuando este no va diagramación. Bueno, y además de los botones adicionales.

He probado a hacer con scale pero entonces yo bloques en la barra de van...

Total answers: 5

roamn 2018-11-06 00:21:34

Específicamente aqu https://www.templatemonster.com/ru/ al pasar la tarjeta por duplicado en el contenedor en el sótano - absolutamente позиционированный sobre la tarjeta con la ayuda de js, y en este contenedor ya se muestran los botones ocultos, que no son visibles durante la reproducción normal. Todo esto es hecho en js.

eellazy 2018-11-06 00:28:34

Y si es la decisión más fácil? Para el bloque aumentaba sin scripts. O puede que ya hay listas de opciones?


roamn 2018-11-06 00:31:06

Aquí no hay una solución simple.
Se puede construir algo similar en el css pero esto exige conocimientos avanzados de css. Yo una vez hice la misma funcionalidad para una tienda en línea, costó sólo CSS.
Sobre soluciones no en el curso. Puede y es.


tyzberd 2018-11-06 01:44:04

que la compaginación no saltaba, deben ser bloques con position: relative + ancho + min-height
y dentro de la unidad con el absoluto y aumenta.

LenovoId 2018-11-06 02:06:19

por eso Es que el efecto puede y debe js pero primitiva efecto similar y eso es suficiente
https://codepen.io/topicstarter/pen/eQNvJj

RiverMacaroon0 2018-11-06 02:18:38

Si lo que desea es aumentar su tarjeta al ховере, sin jquery. Es necesario anexar плейсхолдеры para los navegadores

div {
    transition: all 0.4s linear;
}
div:hover {
    transform: scale(1.2,1.2);
}

Libiros 2018-11-06 08:10:01

se Puede probar así:

jsfiddle.net/hd758bwo

Queda sustituir sus valores. También se puede jugar con el CSS para lograr el efecto deseado.

.main-div - envolver, se puede quitar
.card es la tarjeta, que se expande y abre ocultos de los bloques .card__hidden-*

Hizo con la animación, con la ayuda de transition. Puede animación no eliminar y entonces la tarea se facilita, así como en las clases .card__hidden-* se puede poner la propiedad display:none y en el evento .card:hover hacer oculta unidades display:block. Entonces como en Tu ejemplo.

eellazy 2018-11-06 08:49:46

Buenas tardes!!! Gracias por la respuesta. El único problema es el trabajo de la escala aumenta todo el contenido (en mayúsculas) al Parecer aquí sin js no pasar


Libiros 2018-11-06 10:46:14

eellazy, scale - es la opción más fácil. Se puede prescindir de él, aumentando, por ejemplo, width y height. Y también se puede emplear la padding.

Incluso puede dejar de escala en la unidad principal, y la otra, al pasar, poner scale(0.8), por ejemplo. Pero es una muleta, yo no lo hice. A pesar de que funcionará.


Preguntas relacionadas:

Footer decor

© www.state-it.info | Base of answers to questions for developers and programmers.