Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 25, 2019 at 4:52 pm #1141862
    amanda-mdllc

    Good Morning,

    I have a quick question. How would be the best way to go about setting up a locations page that is set up this way. To have an image be the main graphic and the text content container that has all of the location information be a negative margin and be on top of the main image?

    I would love something like this:
    https://dribbble.com/shots/6517067-Multiple-Locations

    September 26, 2019 at 8:47 pm #1142488
    Basilis

    Hey amanda-mdllc,

    You can do this page with ALB, shouldnt be any problem at all

    Best regards,
    Basilis

    September 26, 2019 at 10:22 pm #1142506
    amanda-mdllc
    This reply has been marked as private.
    September 30, 2019 at 7:11 am #1143233
    Ismael

    Hi,

    Thank you for the update.

    Is there a test page where we can see the issue? The image element itself has a caption overlay option by default, but what you’re doing should work as well. Just add a negative top margin to the text block to pull it upwards until it overlaps the image. You may need to set its “position” property to “relative” and give it a higher “z-index”.

    Best regards,
    Ismael

    September 30, 2019 at 9:24 am #1143250
    Guenni007

    i would do it with image caption – because in the responsive case the text is always at the image itself.
    if you do it with 1/2 containers and shift the container below to overlay the image above the responsive case brings an unwanted order:
    see here above the image-caption solution on top ( 2images)
    https://webers-testseite.de/guenni/multiple-locations/
    below is the thing with 4 1/2 containers.

    for the image-caption solution i gave to the image a custom-class: caption-out-of-image

    .caption-out-of-image .av-image-caption-overlay {
    height: auto;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    border: 3px solid #fff;
    box-shadow: 3px 3px 5px #666;
}

.av-overlay-hover-deactivate.caption-out-of-image .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
    opacity: 1 !important
}

@media only screen and (max-width: 767px) {
  .caption-out-of-image .avia-image-container-inner {
      margin-bottom: 120px !important;
  }
}

    you have to adjust the margin-bottom on responsive case to your needs aswell the value of the overlay width.
    PS: i will try to make it with text under image in the same container – if this works better in the third color-section

    • This reply was modified 5 years, 1 month ago by Guenni007.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.