0
149
VisualizaçõesMostrar el segundo niño al pasar el cursor sobre la imagen
$(document).ready(function() { var mousePos = {}; $(window).mousemove(function(e) { mousePos.x = e.pageX; mousePos.y = e.pageY; }); $(window).mouseleave(function(e) { mousePos.x = 0; mousePos.y = 0; }); setInterval(function() { if (mousePos.x > 0 && mousePos.y > 0) { var color = "background: #000;"; size = "height: 40px; width:40px;"; var left = "left: " + (mousePos.x - 20) + "px;"; var top = "top: " + (mousePos.y - 15) + "px;"; var style = left + top + color + size; $("<div class='ball' style='" + style + "'></div>") .appendTo("#wrap") .one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() { $(this).remove(); } ); } }, 5); }); .bodies { display: flex; } .bodies * { position: absolute; height: 40vh; } html, body { height: 100%; margin: 0; position: relative; } #wrap { width: 100%; height: 100%; position: relative; } .ball { pointer-events: none; position: absolute; border-radius: 50%; animation: implode 2s 0.4s ease-in-out; animation-fill-mode: both; } @keyframes implode { 100% { transform: scale(0); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrap"> <div class="bodies"> <img src="./Images/Blood.jpg" alt="" /> <img src="./Images/Body.jpg" alt="" /> </div> </div>Este es mi código porque cuando paso el mouse sobre la pantalla crea elementos div para mostrar un tipo de efecto de animación con los círculos. Solo quiero ocultar la imagen que está en la parte superior de la segunda imagen cuando se desplaza solo sobre el área específica.
Solo tengo esta imagen en mi mente donde la diapositiva verde es la imagen de abajo y la amarilla de arriba y el agujero verde es la parte que muestra la imagen de abajo. 
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
El background CSS en #wrap y .bodies coloca una pseudoclase :hover en .bodies .
$(document).ready(function() { var mousePos = {}; $(window).mousemove(function(e) { mousePos.x = e.pageX; mousePos.y = e.pageY; }); $(window).mouseleave(function(e) { mousePos.x = 0; mousePos.y = 0; }); setInterval(function() { if (mousePos.x > 0 && mousePos.y > 0) { var color = "background: rgb(138, 3, 3);"; size = "height: 40px; width:40px;"; var left = "left: " + (mousePos.x - 20) + "px;"; var top = "top: " + (mousePos.y - 15) + "px;"; var style = left + top + color + size; $("<div class='ball' style='" + style + "'></div>") .appendTo("#wrap") .one( "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() { $(this).remove(); } ); } }, 5); }); .bodies { display: flex; } .bodies * { position: absolute; height: 40vh; } html, body { height: 100%; margin: 0; position: relative; } #wrap { width: 100%; height: 100%; position: relative; background-image: url(https://cdn.picpng.com/blood/blood-picture-39852.png); background-color: black; background-repeat: no-repeat; background-position: center center; background-size: cover; } .bodies { position:absolute; top: 25%; left: 25%; width: 50%; min-height: 50%; border-radius: 50%; background-color: transparent; background-image: url(https://longreadsblog.files.wordpress.com/2018/07/laura-palmer.jpg ); background-repeat: no-repeat; background-position: center center; background-size: contain; } .bodies:hover { transition: all 0.5s; opacity: 0; } .ball { pointer-events: none; position: absolute; border-radius: 50%; animation: implode 2s 0.4s ease-in-out; animation-fill-mode: both; } @keyframes implode { 100% { transform: scale(0); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrap"> <div class="bodies"> </div> </div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta