Image hover

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey Imeon,

    Thanks for getting in touch!

    That is correct! The caption can be placed while you’re selecting an image from the Media Library. Check the screenshot below for reference.
    https://imgur.com/a/QvaBJ

    Hope this helps!

    Ben

    Thread Starter imeon

    (@imeon)

    Hey Ben,

    Thanks for the response, now I know where the caption setting is!

    Is there a way to have the text appear in the middle of the image like the link I showed above?
    I’m not a fan of having these large images with a small box appearing at the bottom in thin text.

    Thanks!

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey Imeon,

    The only way to achieve that is via custom CSS. Try adding the snippet below and see if it’s what you’re looking for. You can place it under Tools > Layout CSS/JS > CSS so it only gets applied to the page you put it on.

    .fl-photo-content:before {
  display: block;
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
.fl-photo-content:hover:before {
  opacity: 1;
}
.fl-photo-caption {
  top: 50%;
  margin-top: -10px;
  font-size: 20px;
  background: none;
  bottom: auto;
}

    Hope this helps!

    Ben

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image hover’ is closed to new replies.