"Scroll picture"

Valdas Jasas

• March 28, 2021 19:40
• Edited

Hello!

 

Currently I'm creating a website for myself and would like to represent some of my already made WP projects in the portfolio.

How should I add a full website picture like you did in Add block -> add layout -> and then the scroll of any layout.

Please find a screen record - https://we.tl/t-BSKz12hWiT

Update - added some CSS to achieve what I want, but... It works in the editor and doesn't in the preview :( - https://we.tl/t-x8HbXIPJpQ 

Looking forward to hearing from you!

Best regards :)

0

• 

  Sandra Prunici

  • March 29, 2021 15:05

  Hi,

  Unfortunately, at the moment, for the Brizy Image element, we didn't add some hover effects options. Therefore, if you want to have a scroll effect as we added from the Brizy layout presentation (which is a custom effect), we can recommend adding some custom code. We would really like to help you with the right code but unfortunately here on Support, we can't provide some Custom Code and Custom Work.

  Thank you!

  Best regards,
  Sandra

  0
• 

  Valdas Jasas

  • March 29, 2021 15:36

  Hey, Sandra!

   

  So after few days and nightmares regarding "how to make it work" I've found a solution! :D 

   

  If anybody needs it, here you go - 

  Add an "Embed" element and adjust the values accordingly to your needs:

  <style>
  .screen {
  display: block;
  width: 100%;
  height: 450px;
  overflow: hidden;
  margin: 0 auto;
  }
  .screen img {
  bottom: -1450px;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin:0;
  padding:0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
  }
  .screen:hover img {
  bottom: 0;
  -webkit-transition: all 11s;
  -moz-transition: all 11s;
  -ms-transition: all 11s;
  -o-transition: all 11s;
  transition: all 11s;
  }
  </style>
  <div class="container">
  <div class="row">
  <div class="col-md-4 col-md-offset-4 content">
  <div class="screen">
  <img src="YOUR LINK">
  </div>
  </div><!--content-->
  </div><!--row-->
  </div><!--container-->

   

  0
• 

  Sandra Prunici

  • March 30, 2021 08:59

  Hi,

  Wow, this is great! Thank you for sharing here the embed code you find to work and create the scroll effect. I suppose it will help other users that will need it.

  Thank you! It is a pleasure to meet people like you!

  Best regards,
  Sandra

  0

Please sign in to leave a comment.