Image – Lightbox Thumbnail Overlay
An overlay div on a lightbox thumbnail.
Codes & Tutorials
This will serve as the wrapper.
Style it:
position: relative
In the designer as preferred.
Choose the image to be shown as your thumbnail.
Choose the images you want to be shown when you click on your lightbox thumbnail.
Style it as desired, but these properties need to be set for the hover overlay to work properly:
position: relative
In the Navigator panel, place the div so it's above the previous styled Image element. This is the overlay div.
Add your preferred style to it, but these need to be set:
height: 100%
width: 100%
position: absolute (full)
z-index: 1 (or higher than the Lightbox Image element)
It could be anything from headings, icons, etc.
Click Done when finished.
Select the overlay div and go to the Global Objects panel.
Give the interaction a name e.g Lightbox overlay hidden.
Select Initial Appearance and apply these settings:
opacity: 0%
display: none
Go back to the Global Objects panel and give the interaction a name e.g Lightbox overlay show.
Select the trigger of Hover.
Check the Affect different element(s) and type in the class name for your hidden overlay div.
display: block
opacity: 100%
Click Done when finished.
opacity: 0%
display: none
Click Done when finished.
Using the Embedagram, click on “Let’s get started”: http://embedagram.com
Choose The Jquery plugin.
Make a note or copy the Instagram ID .
If you want to keep the content in the center of page, add a container inside the div or section.
.instagram div {
display: inline-block;
vertical-align: middle;
text-align: center; }
.embedagram {
text-align: center;
The class instagram div is the Instagram feed container and class embedagram is the Instagram images itself.
Place the Instagram ID you generated earlier and replace the Instagram ID in the script
Control the amount of images shown in the feed by altering the number 20 in “...success|this|extend|com|true|
each|20|web”.
Containers in Webflow are 940 px so an image width of 313.13 px makes it 3-images-in-a-row. Original Instagram-sizes are 150, 306, and 612, but any size can be used within the designated space for your Instagram images. Set your thumb width by altering the numeric value found at thumb_width: 313.33.
$(document).ready(function() {
$('#slideshow').embedagram({
instagram_id: 1440618534,
thumb_width: 313.33,
wrap_tag: 'div' });
});
</script>
<script>
/*
* embedagram - embed your instagram photos
*http://embedagram.com/plugin.php *
* Copyright (c) 2011 Matthew Hokanson (http://h0ke.com)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
*/
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(0($){$.q.h({7:0(d){1 e={8:-v,4:u,2:\'n\',3:\'m\',5:l,f:0(){6 j},};1 d=$.h(e,d);6 g.k(0(){1 o=d;1 b=$(g);1 c="p://7.i/e/r/"+o.8+"/?s=?";c+="&4="+o.4+"&2="+o.2;c+="&5="+o.5+"&3="+o.3;$.t(c,0(a){b.9(a.9);o.f.w(b)});6 b})}})})(x);',34,34,'function|var|wrap_tag|link_type|thumb_width|limit|return|embedagram|instagram_id|html|||||
|success|this|extend|com|true|
each|20|web|li||http|fn|plugin|callback|getJSON|100|999|apply|jQuery'.split('|'),0,{}))
Create a new page, a section, container and div.
Drag an image widget and make it the same size you stated in the javascript code (thumb_width: 313.33) for your use of the instagram image.
Style the image widget to your choice. Publish the page.
Go to browser, open page and right-click and select Inspect element.
Find the image widget in the CSS.
Copy styles to Webflow Head Custom Code to the class embedagram.
.embedagram {
[PLACE THE CSS HERE]
Style it:
height: 100%
Give it a class of Fullscreen Photo Section.
Style it:
width: 100%
height: 100%
position: relative
Give it a class of Fullscreen Photo Container 1
Style it:
eight:100%
width: 100%
position: absolute
background-image: your-image-1 (set to poster and center)
opacity: 0%
display: none
Give each div a unique class. For simplicity you should continue with the same name like Fullscreen Photo Container 1, Fullscreen Photo Container 2 and so on.
Style it as you want.
Give it a class of Fullscreen Hover Text.
Style it the way you want it.
Add as many text elements as you have background images.
Add a new interaction.
Call it Display Background 1.
Call up the trigger Hover.
Select Affect a different element(s).
Use these settings:
display: block;
transition: 0 ms
opacity: 100%
transition: your choice
opacity: 0%
transition: same as hover in
display: none;
transition: 0 ms
Duplicate the interaction and change the class stated in Affect a different element(s) to the next photo container.
Give it a class of Hero Parallax Section Zoom and an ID of heroparallaxsectionzoom in the Settings panel.
Style it as you want. Change the background color to white if you want a white overlay instead of black as you scroll.
These settings need to be set:
position: relative;
width: 100vw; height: 100vh; // alternative use % instead of vw and vh
background: black;
overflow: hidden; // THIS IS * IMPORTANT * DON'T FORGET ! ! !
Give it a class of Hero Parallax Div Zoom.
Style it as you want but these settings need to be set:
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
height: 100%
widht: 100%
Anything from headings to images etc.
Here you’ll just fill with regular content of your choice. Place it under neath the Hero Parallax Section Zoom.
At the property of transY you can change the scaling value.
$(window).scroll(function(){
var x = $(this).scrollTop(),
transY = (x * 0.5), scale = 1 + (x * 0.0003),
transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';
$('#startherosection .start-hero-div').css({
opacity: 1 - (x * 0.0008),
WebkitTransform: transform,
MozTransform: transform,
msTransform: transform,
transform: transform
});
});
Place in where you want it. Style them as preferred.
img.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
img.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(100%);
}
.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
Make them overlap each other.
The effects are only visible on your published site, not in the preview mode.
The effects are only visible on your published site, not in the preview mode.
.w-slider-dot {
background: teal;font-size: 20px;}
.w-slider-dot.w-active {
background: aqua;
font-size: 20px;}
Give the image in the slider a name of collage.jpg. The image itself is 1800x500 px.
Give the Section a class and ID of Collage. Give the Div a class of Photos.
@-webkit-keyframes collage {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-1800px, 0, 0);
-moz-transform: translate3d(-1800px, 0, 0);
-ms-transform: translate3d(-1800px, 0, 0);
-o-transform: translate3d(-1800px, 0, 0);
transform: translate3d(-1800px, 0, 0); }
}
@-moz-keyframes collage {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
100% {
-webkit-transform: translate3d(-1800px, 0, 0);
-moz-transform: translate3d(-1800px, 0, 0);
-ms-transform: translate3d(-1800px, 0, 0);
-o-transform: translate3d(-1800px, 0, 0);
transform: translate3d(-1800px, 0, 0); }
}
@-ms-keyframes collage {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
100% {
-webkit-transform: translate3d(-1800px, 0, 0);
-moz-transform: translate3d(-1800px, 0, 0);
-ms-transform: translate3d(-1800px, 0, 0);
-o-transform: translate3d(-1800px, 0, 0);
transform: translate3d(-1800px, 0, 0); }
}
@keyframes collage {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
100% {
-webkit-transform: translate3d(-1800px, 0, 0);
-moz-transform: translate3d(-1800px, 0, 0);
-ms-transform: translate3d(-1800px, 0, 0);
-o-transform: translate3d(-1800px, 0, 0);
transform: translate3d(-1800px, 0, 0); }
}
#collage {
position: relative;
height: 500px;
width: 100%;
max-width: inherit;
overflow: hidden;}
#collage .photos {
position: absolute;
height: 100%;
width: 5400px;
background:
transparent url(../images/collage.jpg) repeat-x left top;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: collage 60s linear infinite;
-moz-animation: collage 60s linear infinite;
-ms-animation: collage 60s linear infinite;
animation: collage 60s linear infinite;
}
Give it a class and style it the way you want.
For best scaling appearance, use percentage values. In this example 100% x 70% are used for height and width.
position: relative
height: 70%
width: 100%
Give it a class and style it the way you want. Set height and width so it fills up the entire section
If you intend to have a text element on top of the image but not want it to be zoomed as well you need to set the Slider widget to:
position: relative
height: 100%
width: 100%
Give all of our slides a class.
overflow: hidden
position: relative
Give it a class and style it the way you want. Add your background image.
This setting is needed:
overflow: hidden
position: relative
If you want a text to overlay your zooming image but not want the text itself to be zoomed, this is where you place that text element.
Give it a class and style it the way you want.
This setting is needed:
position: absolute
height: your option*
width: your option*
z-index: 1 (or a value that makes it visible on top of the image)
Select trigger of Slider.
Check Loop and add these settings:
scale: 1.2x
transition: 15000 ms (or your preferred choice)
scale: 1.0x
transition: 15000 ms (or your preferred choice)
scale: 1.0x
transition: 0 ms