Create Image with additional hover effect. Variant 2

NOTE: It is recommended to use this variant, as in this way you use built-in features fully and the whole Fabl will work more efficiently for you. This case let’s you avoid some strange issues and gives you controll over all basic properties and attributes of elements on the page.

Variant #2

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, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This variant includes:

using built-in Fabl elements: Section, Grid, Image, Text and Button
all other things is done by CSS.

Lets describe Fabl features used in this variant in depth:

Inside the story add Section element. This element will be container that holds all other elements.
Inside this Section add two Grids.
The second Grid need to have CSS class, named “grid-hover-box”. Lately, this class will be used to create hover effect.
In first Grid insert Image element with caption.
Open Image “Options” and navigate to “Style”.
Insert two CSS Class Names: “image-caption” and “light-teal”.
“image-caption” will be used to customize Caption.
Second CSS Class Name will be used to set background color.
In the second Grid Element you need to insert two Columns. Each of them should be with CSS Class Name, that will describe the background color property for this columns. For example, in our case the CSS Class Names are: “light-teal-column” and “magenta-column”.
Inside each Column insert, for example, two Text Elements and a Button Element. (In this example, middle Text is too long. So own CSS Class Name is added to this Text - “text-with-overflow” )
You can use built-in Font-settings to update basic styling for this elements. We use: font-color, font-weight, font-size and font-family along with alignment.
Button should have, for instance, “learn-more-oracle-btn”. It also will be used to set custom styling to the button.

Now, basic preparations is done. After you need only to paste somewhere at the bottom of the story Code block, that carry all CSS Styles for the elements that has custom CSS Class Names.

See the example below:

<style>
@media (max-width: 768px){
  .f-grid.grid-hover-box {
    display: flex !important;
    height: unset;
  }
  
  .f-grid.grid-hover-box .f-row.row-component {
    flex-basis: 94.5%;
  }
  
  .f-grid.grid-hover-box .f-column .f-text.text-with-overflow {
    overflow-y: auto !important;
    max-height: 174px;
  }
  
  .f-grid.grid-hover-box .f-row.row-component .f-column {
    max-height: 404px;
    height: 100%;
  }
  
  .f-grid.grid-hover-box .f-row.row-component .f-column .f-column-content {
    max-height: 380px;
  }
}

  .f-grid.grid-hover-box {
    position: absolute !important;
    z-index: 2 !important;
    top: 0;
    height: 100%;
  }
  
  .f-grid.grid-hover-box .f-row.row-component,
  .f-grid.grid-hover-box .f-row.row-component .f-column {
    height: 100%;
  }
  
  .f-grid.grid-hover-box .f-row.row-component .f-column .f-column-content {
    display: flex !important;
    flex-flow: column wrap;
    text-align: left !important;
    justify-content: center !important;
    height: 100%;
    opacity: 0 !important;
    transition: opacity .5s ease;
  }
  
  .f-grid.grid-hover-box .f-column.light-teal-column .f-column-content {
    background-color: #00758F;
  }
  
  .f-grid.grid-hover-box .f-column.magenta-column .f-column-content {
    background-color: #942645;
  }
  
  .f-grid.grid-hover-box .f-row.row-component .f-column .f-column-content .f-text:first-child {
    margin: 0 !important;
  }
  
  .f-column.column-hover-block .f-column-content .f-codeblock.code-hover-block h3 {
    font-size: 20px;
    font-weight: 700;
  }
  
  .f-grid.grid-hover-box .f-row.row-component .f-column .f-column-content:hover {
    transition: opacity .5s ease;
    opacity: 1 !important;
  }
  
  .f-grid.grid-hover-box .f-column .f-column-content .learn-more-oracle-btn {
    margin: 0 !important;
  }
  
  .f-grid.grid-hover-box .f-column.light-teal-column .f-column-content .f-button.learn-more-oracle-btn:hover {
    color: #00758F !important;
  }
  
  .f-grid.grid-hover-box .f-column.magenta-column .f-column-content .f-button.learn-more-oracle-btn:hover {
    color: #942645 !important;
  }
 
</style>