0
161
Views¿Cómo usar el efecto de desplazamiento en imágenes sin fondo de borde a borde?
Estoy tratando de hacer una configuración de escritorio en css, donde si pasa el mouse sobre una imagen, el brillo del fondo cambiará. He usado una imagen sin fondo como esta:
Y este es el código que he escrito:
.parent { height: 700px; width: 100%; box-shadow: 20px 20px 50px 10px black; position: relative; } .Table { position: absolute; top: 30%; left: 30%; margin: -35px 0 0 -35px; } .Table:hover { color: rgba(255, 255, 255, 1); box-shadow: 0 5px 15px rgb(255, 154, 3); }js
import "./App.css"; import table from "./img/desk-removebg-preview.png"; import laptopStand from "./img/laptop_stand-removebg-preview.png"; function App() { return ( <div> <div class="parent"> <img class="Table" src={table} alt="Desk" /> </div> </div> ); }Así es como se ve esto al flotar
Dado que esta imagen de la mesa no tiene fondo, ¿no debería cambiar el color de fondo alrededor de la mesa de borde a borde? ¿Por qué está cambiando el brillo de fondo de la imagen div? ¿Cómo puedo conseguir esto?
Solo para mostrar que esta imagen no tiene antecedentes, aquí hay una captura de pantalla del código vs.
1 answers
Answer question0
Debería usar sombra paralela en lugar de sombra de cuadro. El filtro CSS tiene muchas más opciones, puede atenuar la imagen o hacerla más brillante también.
filter: drop-shadow(16px 16px 20px red);Para que la imagen también tenga un fondo junto con la sombra, le sugiero que agregue un fondo al elemento principal al pasar el mouse. Porque si aplica un fondo a la imagen, la sombra paralela quedará cubierta por ella. Así que aplique bg al padre.
No cargue otra imagen al pasar el mouse solo para este efecto. Dependiendo del ancho de banda del usuario, el usuario tendrá que esperar a que se cargue la segunda imagen mientras se desplaza y no se verá tan bien, mientras que con las transiciones CSS puede hacer que las correcciones mencionadas se vean bien.