Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 11, 2015 at 10:35 am #427002
    blauwoog

    Hello,

    As you will notice viewing this testpage, I placed an image two times with different captionbehavior.
    http://www.delocht.nl/?page_id=3160
    De first is an “image”, the second a single “slide”. In the slide it is a “caption title”.
    I do not like the transparancy behavior of the whole image when using a caption.
    I prefer a small background of the caption, not covering the whole image, just the same as the background of the caption title of a single slide..
    I would like to have a CSS-snippet to make all captions on images like the one on the single slide.
    Can you help me?

    Regards

    Blauwoog

    April 13, 2015 at 3:31 am #427247
    Ismael

    Hi blauwoog!

    Thank you for using Enfold.

    Add this to the Quick CSS field:

    .av-image-caption-overlay {
  background: transparent;
}

.av-image-caption-overlay-center > * {
  background: rgba(0,0,0,0.4);
}

    Cheers!
    Ismael

    April 13, 2015 at 9:08 pm #427797
    blauwoog

    Thanks Ismael!

    It looks good.
    But I like to play with de place of the text, depending on what is seen on the image.
    What’s the parameter in the CSS-snippet to use?
    Let’s say I want to move the text more to the bottomline or more to the top.
    Please show me these two possibilities in the CSS code.

    Thanks a lot!
    Great theme, by the way

    Blauwoog

    April 13, 2015 at 10:40 pm #427849
    Yigit

    Hey!

    Please add following code to Quick CSS and adjust as needed

    .avia-caption {
  bottom: 40px;
  left: 50px;
}

    Best regards,
    Yigit

    April 14, 2015 at 4:07 pm #428293
    blauwoog

    Hello Yigit,

    It does’nt work. Is it “avia-caption” or “av-caption”?
    To get it right..this is the code I use, and the overlay-text .is still centered.
    I used “avia” as well as “av”
    Please be patient with me..

    regards
    Blauwoog

    
.av-image-caption-overlay {
  background: transparent;
 }

.avia-caption {
  bottom: 10px;
  left: 10px;
 }

.av-image-caption-overlay-center > * {
  background: rgba(0,0,0,0.4);
 }
    April 16, 2015 at 8:15 am #429388
    Ismael

    Hey!

    If you can provide a screenshot of how you want the caption to look like, it will help. Use imgur or dropbox. :)

    Regards,
    Ismael

    April 16, 2015 at 9:12 pm #429905
    blauwoog

    there you go!

    regards
    blauwoog

    April 19, 2015 at 5:29 am #430816
    Ismael

    Hi!

    Thank you for the screenshots. First, you need to update the theme to version 3.1.3 then add this to the Quick CSS field to adjust the position of the image element caption:

    .av-image-caption-overlay-center {
  display: block;
  width: 50%;
  bottom: 20px;
  left: 20px;
  position: absolute;
}

.av-caption-image-overlay-bg {
  display: block;
  height: 30px;
  width: 50%;
  position: absolute;
  left: 20px;
  bottom: 20px;
}

    Cheers!
    Ismael

    September 22, 2017 at 10:55 pm #855628
    mmaack

    AWESOME! Fixed my recent issue too!
    Thanks!

    September 23, 2017 at 9:59 pm #855911
    Mike

    Hi,
    Glad we were able to help, Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.