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;
}
)