/*
* GALLERY BlOCK GRID OVERLAY TITLE PLUGIN START
*/
// SETTINGS
// title font-size
@gridOverlayFontSize: 19px;
// Title Font-Weight (100-900)
@gridOverlayFontWeight: 400;
// title font-size on narrower screens
@gridOverlayFontSizeSmallscreens: 13px;
// Title distance from images top border. e.g "10px" or "25%"
@gridOverlaySpaceFromTop: 36%;
// padding (space) around the title. Prevent text from clashing to the borders of image
@gridOverlayTitlePadding: 10px;
// Title Letter case. Use 'none' for lowercse and 'uppercase' to uppercase
@gridOverlayTitleLettercase: uppercase;
// Title text color. Use http://www.colorpicker.com/
@gridOverlayTitleColor: #FFF;
// Add some space to your title to make it fancy. Try something around 0.0em – 0.5em
@gridOverlayTitleLetterSpacing: 0.4em;
// Background color that appears when hovering image. Use http://www.colorpicker.com/
@gridOverlayBackgroundColor: black;
// Image opacity when hovered. Use value between 0.0 – 1.0
@gridOverlayHoveredImageOpacity: 0.1;
// Speed of hover effect
@gridOverlayTransitionSpeed: 0.2s;
// You can add a small animation to the text so it slides up while being faded in. Choose how many pixels to move. You can also use negative values (e.g. -12px) or 0
@gridOverlayTitleTranslatePixels: 20px;
// site background color
@gridOverlaySiteBackgroundColor: #FFF;
// Font to be used (you'll need to find out the CSS code name of the font family )
@gridOverlayFontFamily: "Myriad Pro";
/*
1. remove '.no-touch' before 'html' to enable plugin on mobile (not recommended!)
2. add collection id to apply only to specific page. e.g. instead of just 'body' use 'body#collection-5b0e868a562fa77adfff1618'
*/
html.no-touch
body
{
// THAT'S IT! DON'T MODIFY ANY CODE BELOW UNLESS YOU KNOW WHAT YOU'RE DOING.
// transition to the image itself
img.thumb-image.loaded{
transition: @gridOverlayTransitionSpeed opacity ease;
-webkit-transition: @gridOverlayTransitionSpeed opacity ease;
}
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .slide a {
background-color: @gridOverlayBackgroundColor;
}
// relative positioning so absolute positioning of title works
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper{
position:relative;
}
//title: make parent link clickable, absolute position over image and add transition
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title{
line-height:1.4;
text-transform: @gridOverlayTitleLettercase !important;
font-size: @gridOverlayFontSize !important;
font-weight: @gridOverlayFontWeight !important;
color: @gridOverlayTitleColor;
pointer-events: none;
//position:absolute;
//top:@gridOverlaySpaceFromTop;
opacity:0;
transition: @gridOverlayTransitionSpeed all ease;
-webkit-transition: @gridOverlayTransitionSpeed all ease;
box-sizing:border-box !important;
padding-left:@gridOverlayTitlePadding;
padding-right:@gridOverlayTitlePadding;
white-space: normal !important;
font-family: @gridOverlayFontFamily;
letter-spacing: @gridOverlayTitleLetterSpacing;
//hover move up/down animation
-webkit-transform: translateY(@gridOverlayTitleTranslatePixels);
-ms-transform: translateY(@gridOverlayTitleTranslatePixels);
transform: translateY(@gridOverlayTitleTranslatePixels);
position: absolute;
top: @gridOverlaySpaceFromTop;
}
// when hoverin a slide set the opacities of image and title
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .slide:hover {
.image-slide-title {
opacity:1;
//hover move up/down animation
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
top: @gridOverlaySpaceFromTop; //variable animationhoverHeightFromTop
}
img.thumb-image{
opacity: @gridOverlayHoveredImageOpacity !important;
}
}
//video gallery block fix /needs update
/*
.sqs-gallery-design-grid .slide .margin-wrapper {
background: @gridOverlayBackgroundColor;
img{
transition: @gridOverlayTransitionSpeed opacity ease;
-webkit-transition: @gridOverlayTransitionSpeed opacity ease;
// width:100% !important;
}
&:hover{
img{
opacity: @gridOverlayHoveredImageOpacity !important;
}
}
}
*/
//needs update!
/*
// If you have padding between images set AND you see a small border below images set this true instead of false
.paddingAroundImages(true);
// fix small slice of background showing on some aspect ratios
.paddingAroundImages(@paddingAroundImages) when (@paddingAroundImages = true) {
img.thumb-image{
border-bottom: 1px solid @gridOverlaySiteBackgroundColor;
}
}
*/
@media (max-width:600px){
.sqs-gallery-block-grid .margin-wrapper .image-slide-title{
font-size: @gridOverlayFontSizeSmallscreens !important;
}
}
} //html (with optional "no-touch" -class)
/*
* GALLERY BlOCK GRID OVERLAY TITLE PLUGIN END
*/
