Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Color Tint Image Slides

You can use CSS to apply a color tint to slider images.

  • Apply CSS to Specific Slider: Use the CSS Addon to apply the CSS from this doc to a specific slider on your site.
  • Apply CSS to ALL Sliders: To apply the CSS from this doc to affect ALL sliders on your site, add to your active theme‚Äôs style.css file.

To apply a color tint to your image slides, use the following CSS and modify to meet your specific needs:

/* The color you want to use to tint your image with, change to the HEX value you wish to use.*/
.soliloquy-container .soliloquy-item { background-color: #336699 !important; }

/* Adjust the opacity of the image to change how strongly the color specified above
   tints the image slide. */
.soliloquy-container .soliloquy-image { opacity: 0.6 !important; }

Tint on Hover

Looking to apply a tint only on hover? Refer to the example CSS below:

/* The color you want to use to tint your image with, change to the HEX value you wish to use. */
.soliloquy-container .soliloquy-item { background-color: #336699 !important; }

/* The following sets a transition speed for the image slide's opacity, adjust as you wish. */
.soliloquy-container .soliloquy-image { 
   opacity: 1 !important;
   -webkit-transition: opacity 500ms ease; 
   -moz-transition: opacity 500ms ease;
   transition: opacity 500ms ease;
}

/* Adjust the opacity of the image to change how strongly the color specified above
   tints the image slide. */
.soliloquy-container:hover .soliloquy-image { opacity: 0.6 !important; }

Remove Tint on Hover

Looking to remove the color tint on hover? Refer to the example CSS below:

/* The color you want to use to tint your image with, change to the HEX value you wish to use. */
.soliloquy-container .soliloquy-item { background-color: #336699 !important; }

/* Adjust the opacity of the image to change how strongly the color specified above
   tints the image slide. Also sets a transition speed for the image slide's opacity,
   adjust as you wish. */
.soliloquy-container .soliloquy-image { 
   opacity: 0.6 !important;
   -webkit-transition: opacity 500ms ease; 
   -moz-transition: opacity 500ms ease;
   transition: opacity 500ms ease;
}

/* The following makes the image completely opaque on hover, removing all color tint. */
.soliloquy-container:hover .soliloquy-image { 
   opacity: 1 !important;
}
[i]
[i]