Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 18, 2015 at 2:48 pm #413658
    Vermishelle

    Hello!

    First of all, thanks for the 3.1 update, it’s great!

    Here’s the question. I have 5 vimeo embeds on the page. I guess, it makes the page load slower, so I want to switch to lightbox videos, in order to avoid unnecessary requests to vimeo servers.

    Sure, it would be nice to have it as an option in the “video” media component. But as soon as there’s no such thing, I’m looking for workaround.

    When I use “image” element, the playback icon is not visible until hover, it makes not obvious that there’s video actually. How can I make the playback icon visible before hover? Let the current hover animation stay, I like it.

    March 18, 2015 at 9:30 pm #413993
    Elliott

    Hi Vermishelle!

    Try adding this to your custom CSS.

    .avia_image .image-overlay {
  display: block !important;
  opacity: 0.5 !important;
  visibility: visible !important;
}

    If you add them to a color section and then give the color section an ID then you can target only those images like so.

    #yourID .avia_image .image-overlay {

    Best regards,
    Elliott

    • This reply was modified 9 years, 8 months ago by Elliott.
    March 18, 2015 at 11:00 pm #414030
    Vermishelle

    The play icon does not appear before first hover. After the first hover it stays, but I need it on load.

    • This reply was modified 9 years, 8 months ago by Vermishelle.
    March 18, 2015 at 11:01 pm #414031
    Vermishelle
    This reply has been marked as private.
    March 19, 2015 at 2:57 pm #414442
    Ismael

    Hey!

    You can add this to the Quick CSS field:

    a.avia_image.mfp-iframe.lightbox-added:before {
  content: '\E897';
  font-family: 'entypo-fontello';
  position: absolute;
  border-radius: 50px;
  background: #2d5c88;
  height: 50px;
  width: 50px;
  line-height: 50px;
  left: 50%;
  top: 50%;
  margin: -40px 0 0 -40px;
  z-index: 500;
  text-align: center;
  color: #fff;
  opacity: .5;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.avia-image-container-inner:hover a.avia_image.mfp-iframe.lightbox-added:before {
  content: '';
  opacity: 0;
}

    Cheers!
    Ismael

    March 19, 2015 at 3:10 pm #414469
    Vermishelle

    Ismael, icons befor hover and after don’t match.

    • This reply was modified 9 years, 8 months ago by Vermishelle.
    March 20, 2015 at 4:45 pm #415377
    Elliott

    Hey!

    I viewed your link but there is no content in the page. Send us a link to the exact page and take a screenshot highlighting what is going on so we can get a better idea.

    Regards,
    Elliott

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