Hover Box - Text and Overlay on Hover - How To?

Carl Sollenberger

• April 28, 2022 00:19

Hi there. Is there a way to do this within Brizy Pro for Wordpress?

If not, how can it be implemented on a page built with Brizy Pro?

Hover box – text over images on hover and more… | CSS-WORKSHOP.COM

0

• 

  KC George

  • April 28, 2022 11:43
  • Edited

  Hi Carl,

  Yes; you can implement this in Brizy. Please see my test page here https://homi.kctest.online/test/

  Please follow this procedure 

  1. Upload an image to your Media Library and copy its URL
  2. Paste the image URL in the HTML code like in this example.  
  3. Add the Brizy Embed element into your page and copy paste the HTML code.
  4. In the embed element, click Settings- More Settings - Advanced paste the CSS code under Custom CSS. https://jmp.sh/SEA3XY4 

  <div class="hvrbox">
      <img src="https://homi.kctest.online/wp-content/uploads/2022/04/stock-photo-shot-of-confident-woman-sitting-behind-her-laptop-and-having-video-call-while-working-from-home-1919025290.jpg" alt="Mountains" class="hvrbox-layer_bottom">
      <div class="hvrbox-layer_top">
          <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div>
      </div>
  </div>

  0
• 

  Carl Sollenberger

  • May 10, 2022 05:11

  Hi KC George.

  Thanks for your reply. On your CSS code example some of the code was cut off in the image. https://jmp.sh/SEA3XY4  Is there any way you can repost that?

  Thanks!

  0
• 

  KC George

  • May 10, 2022 17:21

  Hi Carl

  I have used the CSS you had provided in your original post. This was your link Hover box – text over images on hover and more… | CSS-WORKSHOP.COM

  .hvrbox,
  .hvrbox * {
      box-sizing: border-box;
  }
  .hvrbox {
      position: relative;
      display: inline-block;
      overflow: hidden;
      max-width: 100%;
      height: auto;
  }
  .hvrbox img {
      max-width: 100%;
  }
  .hvrbox .hvrbox-layer_bottom {
      display: block;
  }
  .hvrbox .hvrbox-layer_top {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 15px;
      -moz-transition: all 0.4s ease-in-out 0s;
      -webkit-transition: all 0.4s ease-in-out 0s;
      -ms-transition: all 0.4s ease-in-out 0s;
      transition: all 0.4s ease-in-out 0s;
  }
  .hvrbox:hover .hvrbox-layer_top,
  .hvrbox.active .hvrbox-layer_top {
      opacity: 1;
  }
  .hvrbox .hvrbox-text {
      text-align: center;
      font-size: 18px;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      -moz-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  .hvrbox .hvrbox-text_mobile {
      font-size: 15px;
      border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
      border-top: 1px solid rgba(179, 179, 179, 0.7);
      margin-top: 5px;
      padding-top: 2px;
      display: none;
  }
  .hvrbox.active .hvrbox-text_mobile {
      display: block;
  }

  0
• 

  Carl Sollenberger

  • May 12, 2022 10:26

  Thank you very much! I am trying to figure out a way to do this with designing the HTML component in Brizy without an embed… then applying the CSS in the Brizy CSS section under advanced. That way I can save the blocks in my account as preset animations. Have a great day Sincerely, Carl S 

  0

Please sign in to leave a comment.