CHRIS ROLF

ROLLOVER PLUGINS

 

Plugins demo

General setup

1A. Go to your Custom CSS window and paste the code below.

1B. If you want to apply a particular style to only ONE page on your site, then paste the CSS portion of the code inside your Page Settings by clicking on the gear icon next to your page.

You'll need to add <style> tags around your code like so:

<style>
  Paste here your CSS
</style>
Note: if pasting the code inside an index page, you'll need to add it under the settings of the index page itself, not the ones that are inside it.

 

#1: INDEX GALLERIES

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

To change the position the text and set the styles (font + color) of the title and subtitle, you can do so through the options of the style editor.

To adjust the overlay color, you can do it through the style editor as well by selecting a color, with the transparency level of your choice, under Image Overlay.

Note: make sure you have Hover Style: Plain
 
Style editor.png
Adjusting overlay.png
 
 
/*INDEX GALLERY ROLLOVER - By Thirty Eight Visuals*/
.Index-gallery-item-image img {
  -webkit-transition: opacity 1.5s, -webkit-transform 3s !important;
          transition: opacity 1.5s, -webkit-transform 3s !important;
       -o-transition: opacity 1.5s, transform 3s !important;
          transition: opacity 1.5s, transform 3s !important;
          transition: opacity 1.5s, transform 3s, -webkit-transform 3s !important;
}

.Index-gallery-item-content .Index-gallery-item-content-body {
  opacity: 0;
  max-height: 0;
  -webkit-transition: max-height 3s;
       -o-transition: max-height 3s;
          transition: max-height 3s;
}

.Index-gallery-item-content-heading {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
}

.Index-gallery-item-content-heading::after {
  content: '';
  background: #2fedb8; /*changes line color*/
  width: 10%; /*changes line initial width*/
  height: 2px; /*changes line thickness*/
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 2s;
       -o-transition: width 2s;
          transition: width 2s;
}

/*Hover*/
.Index-gallery-item-inner:hover
.Index-gallery-item-content-body  {
  opacity: 1 !important;
  max-height: 10em;
  -webkit-transition: opacity 1.5s ease-out 0.3s, max-height 3s;
       -o-transition: opacity 1.5s ease-out 0.3s, max-height 3s;
          transition: opacity 1.5s ease-out 0.3s, max-height 3s; 
}

.Index-gallery-item-inner:hover .Index-gallery-item-image img {
  opacity: 0.3;
  -webkit-transform: scale(1.3) rotate(5deg);
      -ms-transform: scale(1.3) rotate(5deg);
          transform: scale(1.3) rotate(5deg);
}

.Index-gallery-item-inner:hover .Index-gallery-item-content-heading::after {
  width: 100%;
}

 

#2: SUMMARY BLOCKS (GRID LAYOUT)

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

The categories/tags placement and text alignment can be done through the summary block itself.

/*SUMMARY BLOCKS ROLLOVER - By Thirty Eight Visuals*/
.summary-thumbnail-outer-container a {
  margin: 0 !important;
}

.sqs-gallery-design-autogrid .summary-content.sqs-gallery-meta-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
      flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  padding-left: 10%;
  padding-right: 10%;
}
  
.summary-thumbnail-outer-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 10%;
  padding-right: 10%;
  background-color: rgba(0, 0, 0, .1); /*adjusts the overlay color*/
  -webkit-transition: background-color 1.5s;
       -o-transition: background-color 1.5s;
          transition: background-color 1.5s;
}

.sqs-gallery-design-autogrid .summary-excerpt p {
  color: white; /*changes the color of the subtitle*/
  font-family: 'Sofia Pro'; /*changes the font of the subtitle*/
}

.sqs-gallery-design-autogrid .summary-excerpt,
.sqs-gallery-design-autogrid .summary-read-more-link,
.sqs-gallery-design-autogrid .summary-metadata-container,
.sqs-gallery-design-autogrid .summary-price {
  color: white; /*changes the color of all the smaller text*/
  opacity: 0;
  max-height: 0;
  -webkit-transition: max-height 3s;
       -o-transition: max-height 3s;
          transition: max-height 3s;
}

.sqs-gallery-design-autogrid .summary-title {
  color: white; /*changes the color of the title*/
  font-family: 'Trump Gothic Pro'; /*changes the font of the title*/
  position: relative;
  padding-bottom: 8px;
  text-transform: none;
}

.sqs-gallery-design-autogrid .summary-title::after {
  content: '';
  background: #2fedb8; /*changes the color of the line*/
  width: 10%; /*changes the initial width of the line*/
  height: 2px; /*changes the thickness of the line*/
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 2s;
       -o-transition: width 2s;
          transition: width 2s;
}

.sqs-gallery-design-autogrid .summary-item .summary-thumbnail {
  -webkit-transition: -webkit-transform 3s;
          transition: -webkit-transform 3s;
       -o-transition: transform 3s;
          transition: transform 3s;
}

/*Hover*/
.sqs-gallery-design-autogrid .summary-item:hover .summary-metadata-container {
   opacity: 1;
}
  
.sqs-gallery-design-autogrid .summary-item:hover .summary-excerpt,
.sqs-gallery-design-autogrid .summary-item:hover .summary-read-more-link,
.sqs-gallery-design-autogrid .summary-item:hover .summary-metadata-container,
.sqs-gallery-design-autogrid .summary-item:hover .summary-price {
  opacity: 1;
  max-height: 10em;
  -webkit-transition: max-height 3s, opacity 1.5s ease-out 0.3s;
       -o-transition: max-height 3s, opacity 1.5s ease-out 0.3s;
          transition: max-height 3s, opacity 1.5s ease-out 0.3s;
}

.sqs-gallery-design-autogrid .summary-item:hover .summary-title::after {
  width: 100%;
}

.sqs-gallery-design-autogrid .summary-item:hover .summary-thumbnail-outer-container::after {
  background-color: rgba(0, 0, 0, .7); /*adjusts the color of the overlay on hover*/
}

.sqs-gallery-design-autogrid .summary-item:hover .summary-thumbnail {
  -webkit-transform: scale(1.3) rotate(5deg);
      -ms-transform: scale(1.3) rotate(5deg);
          transform: scale(1.3) rotate(5deg);
}

 

#3: Gallery blocks (gRID LAYOUT)

HTML

For this to work, you'll need to add this HTML code to each of your images' Image Title:

<strong>Title here</strong><p>Brief description here</p><em>Faux link here</em>

CSS

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

/*GALLERY BLOCK ROLLOVER By Thirty Eight Visuals*/
.slide.sqs-gallery-design-grid-slide .image-slide-anchor::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 10%;
  padding-right: 10%;
  background-color: rgba(0, 0, 0, 0.1); /*adjusts the initial overlay color*/
  -webkit-transition: background-color 1.5s;
       -o-transition: background-color 1.5s;
          transition: background-color 1.5s;
}

.slide.sqs-gallery-design-grid-slide .image-slide-title {
  color: white; /*changes all text color*/
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 5px;
  white-space: normal;
  width: auto !important;
  min-width: 70%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0 auto !important;
}

.slide.sqs-gallery-design-grid-slide .image-slide-title strong {
  font-family: 'Trump Gothic Pro'; /*changes the title font*/
  font-size: 20px; /*changes title font size*/
  font-weight: normal; /*removes bold style*/
  display: block;
  padding-bottom: 8px;
  position: relative;
}

.slide.sqs-gallery-design-grid-slide .image-slide-title p,
.slide.sqs-gallery-design-grid-slide .image-slide-title em {
  display: block;
  font-family: 'Sofia Pro'; /*changes the subtitle and 'link' font*/
  font-style: normal; /*removes italics from 'link' text*/
  font-size: 1em; /*sets font size for subtitle and 'link' text*/
  margin: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: max-height 3s;
       -o-transition: max-height 3s;
          transition: max-height 3s;
}

.slide.sqs-gallery-design-grid-slide .image-slide-anchor img {
  -webkit-transition: -webkit-transform 3s;
          transition: -webkit-transform 3s;
       -o-transition: transform 3s;
          transition: transform 3s;
          transition: transform 3s, -webkit-transform 3s;
}

.slide.sqs-gallery-design-grid-slide .image-slide-title strong::after {
  content: '';
  background: #2fedb8; /*changes the line color*/
  width: 10%; /*changes the initial line width*/
  height: 2px; /*changes the thickness of the line*/
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: width 2s;
       -o-transition: width 2s;
          transition: width 2s;
}

/*Hover*/
.slide.sqs-gallery-design-grid-slide:hover .image-slide-title strong::after {
  width: 100%;
}

.slide.sqs-gallery-design-grid-slide:hover .image-slide-title p,
.slide.sqs-gallery-design-grid-slide:hover .image-slide-title em {
  opacity: 1;
  max-height: 10em;
  -webkit-transition: max-height 3s, opacity 1.5s ease-out 0.3s;
       -o-transition: max-height 3s, opacity 1.5s ease-out 0.3s;
          transition: max-height 3s, opacity 1.5s ease-out 0.3s;
}

.slide.sqs-gallery-design-grid-slide:hover .image-slide-anchor::after {
  background-color: rgba(0, 0, 0, 0.7); /*adjusts the image overlay color on hover*/
}

.slide.sqs-gallery-design-grid-slide:hover .image-slide-anchor img {
  -webkit-transform: scale(1.3) rotate(5deg);
      -ms-transform: scale(1.3) rotate(5deg);
          transform: scale(1.3) rotate(5deg);
}
 

SUPPORT & CUSTOMIZATION

Get in touch if you have any issues with the code/instructions, or if you'd like to request specific plugin customizations (a customization service quote may apply).