How to achieve this
So this bed room background is my hero image. I want to transition between different wall images (wall behind bed) keeping bed room same, i just want to transition between different walls. Offcourse one way to make this would be make wall transparent and transition different wall background even so, how to make that wall wallpaper match that angle of the wall.
7 Replies
I'd use a grid with a single column and single row, named, and then set each layer as a child set to that single cell and then you can fade between them.
You can either do it with full images or put a transparent image on top and just transition between the walls
Also while I'm here, make the images much smaller as 8MB is fairly hefty for an image. I assume you were going to anyway but just making sure
@z- ::theProblemSolver:: Thanks for the reply, Lets say the wall image is not slanted as above, lets say it is straight facing towards you. How to make that image match the angle of the wall
Am I understanding you correctly that you want to place an element to cover the wall?
You can use 3D CSS to make things line up but it would be a lot of trial and error getting the correct angle and perspective but it would be entirely possible
https://codepen.io/z-/pen/xxmaaYg/1140e3dd94ee4db4fa26ad9a155c51f5
.wall should be behind the image and make the image wall transparent
Note, I applied a background image to the div if you're looking at it before I did that
@z- ::theProblemSolver:: Damn!, this is exactly what i was looking for!!!!!. Thank you so much.
@z- ::theProblemSolver:: https://codepen.io/stressunfit/pen/PoXdyNv, I am trying to replace the design with this picture: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQcK5CjxYQadOxMBY2C62SJ_U40IgeOzm_CfVsvhF5hx7kkbSW-2VwYS3huMxVoWSZ_IAHIYnBGDOJypkTYyK6zsNx23Dtw8tpIqldrv0f3LztG_GF1_qDGkRfu_c0-cjadCSQmqsVQxAnSPBVxURJEknEIiAJKnHZ7WeXfGTU8ls1PTd_wuhiPx30tpLB/s5000/v1013-p-0009a.jpg. How can i achieve the same affect with this image
