-
Posts
-
Hi,
Just wondering if there is a way to overlap an image like the example in the link below:
https://www.dropbox.com/s/86gae0v5czf9t5v/Screen%20Shot%202019-01-13%20at%2010.16.48%20AM.png?dl=0
Hey markpevans,
Yes, it can be done, but it will require graphics prepared for it and extensive css knowledge.
Best regards,
Victoriayou have to have than image as png file with cut-out form.
That was my test setup:
click to enlarge it –
the image alb gets a custom class ( on my case it is: overlap-image )
this comes to quick css:.avia-image-container.overlap-image { position: relative; top: -200px; }or take some relative dimensions like top: -15vw or 10% etc. play a bit on that.
see result – better wouid be to have the image totaly as cut-off.
https://webers-testseite.de/overlap/And you see on small screens that you have to do some extra css
or just to set up that css for screens over your break point for mobile:@media only screen and (min-width: 768px){ .avia-image-container.overlap-image { position: relative; top: -200px; } }And you can have sliders above too etc.
you can inspect the CSS and the images in the ENFOLD APP demo, there is a similar effect with PNG and negative margin in CSS:
Yes gitte – but you can not have that : “Custom top and bottom margin” for a single Column. Always both columns get the setting!
You can set both columns to equal height and set them to bottom alignment. But then view on smaller screens will get confused and you have more control on the overlapping behavior on my method.
If you only have one image then the 1/1 container will be a good and quick alternative – as you said
- You must be logged in to reply to this topic.