Blocks, effect nevio variant

The example below show a variant of BLOCKS - Nevio effect.

 


DEMO STYLE#7 - NEVIO, variant, images displayed on 2 cols (left side, below) // useful for hotels, services, etc.

Copy/paste and modify the following code in your template > constants:

...

plugin.bootstrap_package.settings.scss.rollover4-nevio-blockBorderRadius = 50%
plugin.bootstrap_package.settings.scss.rollover4-nevio-blockMarginBottom = 4px
plugin.bootstrap_package.settings.scss.rollover4-nevio-blockPadding = 0px
plugin.bootstrap_package.settings.scss.rollover4-nevio-imageSize = 36px
plugin.bootstrap_package.settings.scss.rollover4-nevio-titleColor= #005091
plugin.bootstrap_package.settings.scss.rollover4-nevio-titleSize= 14px
plugin.bootstrap_package.settings.scss.rollover4-nevio-titleWeight = 500
plugin.bootstrap_package.settings.scss.rollover4-nevio-blockBgColor = transparent
plugin.bootstrap_package.settings.scss.rollover4-nevio-blockBgROColor = transparent
plugin.bootstrap_package.settings.scss.rollover4-nevio-allROColor = none
plugin.bootstrap_package.settings.scss.rollover4-nevio-imageBorder = none
plugin.bootstrap_package.settings.scss.rollover4-nevio-blockBorder = 0px solid #005091
plugin.bootstrap_package.settings.scss.rollover4-nevio-imageBorderRadius = 0%

...

then add this styles within a +ext template for the page interested:

page.CSS_inlineStyle (
  .rollover4.rollover4-layout2857.gallery-item picture, 
  .rollover4.rollover4-layout2857.gallery-item picture img {
    width: 36px !important;
    height: auto  !important;
  }
  
  .rollover4.rollover4-layout2857 .services-item p {
      color: #666 !important;
   }  
)