Create Image with additional hover effect. Variant 1

Sometimes it is necessary to create Images, Text, other elements that has additional hover effect.

Variant #1

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

This variant includes:

using the built-in Fabl image element;
using the Fabl built-in code element for inserting content that will be shown on hover;
all other “magic” is done by CSS.

Below are the steps to implement variant 1 of the hover effect:

Inside the story, add Grid element.
Open Column “Options” and navigate to “Style”.
Apply to Column CSS Class Name: “column-hover-block”.
Insert Image Element inside this Column.
Add a caption under this image.
Open Image “Options” and navigate to “Style”.
Insert two CSS Class Names: “image-caption” and “light-teal”.
“image-caption” will be used to customize the caption.
“light-teal” will be used to set the background color.
Under The Image Element, add Fabl Code Element. This code block will be used to create additional content, that will be shown on hover. See example down below:

<div>
  <h3>Lorem Ipsum</h3>
  <p class="overflow-text">Lorem Ipsum is simply dummy text of the printing and
  typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown
  printer took a galley of type and scrambled it to make a
  type specimen book. It has survived not only five centuries,
  but also the leap into electronic typesetting, remaining
  essentially unchanged. It was popularised in the 1960s
  with the release of Letraset sheets containing Lorem Ipsum
  passages, and more recently with desktop publishing software
  like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <button class="hover-block-button learn-more-oracle-btn" href="#">
    Get more resources
  </button>
</div>

Apply CSS Class Name: “code-hover-block” to the code block.

Now that the basic preparations is done, at the bottom you’ll need to paste the Code block that carries all CSS Styles for the elements that have custom CSS Class Names.

See the example below:

<style>
@media (max-width: 768px) {
  p.overflow-text {
    overflow-y: auto;
    max-height: 180px;
  }
}

  .f-image.image-caption .f-image-wrap span.f-image-caption {
    width: 100%;
    text-align: left;
    padding: 30px;
    margin: 0px;
  }
  
  .light-teal {
    background-color: #00758F;
  }
  
  .magenta {
    background-color: #942645;
  }
  
  .f-column.column-hover-block .f-column-content {
    position: relative;
  }
  
  .f-column.column-hover-block .f-column-content .f-codeblock.code-hover-block {
    position: absolute !important;
    z-index: 1 !important;
    height: 100%;
    top: 0;
    opacity: 0 !important;
    display: flex;
    align-items: center;
    color: #fff;
    transition: opacity .5s ease;
  }
  
  .f-column.column-hover-block .f-column-content .f-codeblock.code-hover-block h3 {
    font-size: 20px;
    font-weight: 700;
  }
  
  .f-column.column-hover-block .f-column-content:hover .f-codeblock.code-hover-block {
    transition: opacity .5s ease;
    opacity: 1 !important;
  }

</style>

NOTE: However, this variant do not ideal and elegant. This approach still uses Code block for generating additional content somehow. It is not recommended to achieve hover effect using this variant.

Check out this story for a more convenient and better variant:
CREATE IMAGE WITH ADDITIONAL HOVER EFFECT. VARIANT 2