We Keep Coding

Is there a way to mask a sticky element using an absolute element?

I've been trying to create a sticky position image that changes as it scrolls across the border between two sections of my page. So basically, there should be two sticky position images, the top one gets masked by the bottom section and the bottom gets masked by the top section. I am having trouble figuring out a way to mask both images at the same time (you can use the bottom section div to hide the top image, and vice versa, but not both at the same time).
Here's an image to illustrate what I'm trying to do
Here's the code I'm using:
.lblue {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightblue;
}
.lred {
height: 40vh;
width:10vw;
position: -webkit-sticky;
position: sticky;
top:30vh;
left:45vw;
background:lightcoral;
}
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background:blue;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background:red;
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>
Thank you!

Here’s a solution. The trick is to use the images as CSS backgrounds, because CSS backgrounds can be easily fixed in the viewport of their parents.
.blue {
position: absolute;
top:0;
height:150vh;
width:100vw;
background: blue fixed linear-gradient(lightblue, lightblue) 45vw 30vh / 10vw 40vh no-repeat;
}
.red {
position: absolute;
top:100vh;
height:100vh;
width: 100vw;
background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 30vh / 10vw 40vh no-repeat;
}
<div class="blue"></div>
<div class="red"></div>
In this solution, you can replace linear-gradient(color, color) by the URL of your image, using url(https://…). I used gradients because, for the browser, gradients are (generated) images. So, this trick actually works with images.
The position: absolute also becomes useless, at least for the demo.
The long background rule may need some explanations. background is a shorthand (= a short way to write several properties in a single line) for:
background-color: red;
background-attachement: fixed;
background-image: linear-gradient(lightcoral, lightcoral);
background-position: 45vw 30vh;
background-size: 10vw 40vh;
background-repeat: no-repeat;

position:fixed can do this if you conside a clip-path trick to hide the overflow so that each element will show only inside its section
.lblue,
.lred {
height: 40vh;
width: 10vw;
position: fixed;
top: 30vh;
left: 45vw;
background: lightblue;
}
.lred {
background: lightcoral;
}
.blue,
.red {
height: 100vh;
background: blue;
clip-path: inset(0 0 0 0); /* this is important */
}
.red {
background: red;
}
body {
margin: 0
}
<div class="blue">
<div class="lblue"></div>
</div>
<div class="red">
<div class="lred"></div>
</div>

Automatic img zooming?

I have a bunch of images being displayed one at a time in a div. The images are all a few thousand pixels by a few thousand pixels.
For example, one image is 4353x2721.
When I preview the page, it zooms in the picture and cuts out things along only the top and bottom edges. It remains the right width.
I need it to just resize it so that it fits the screen/div properly without cutting any parts.
The CSS for that section is:
.largeImage img {
position:absolute;
top:0;
left:0;
width:100%;
}
If I add height:100%;, it still doesn't work. Still zooms in.

You need to set max-width: 100% and max-height: 100% for image. It will make image to fit its larged dimension to parent container limits and scale down other dimension.
Look at snippet:
.largeImage {
width: 150px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid green;
}
.largeImage img {
display: block;
position:absolute;
top:0;
left:0;
right: 0;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
<div class="largeImage">
<img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>
<div class="largeImage">
<img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>

How to fill the screen with image in impress.js?

My impress.js slides have images that I would like to fill the screen and center, here's the code:
<div id="impress">
<div class="step" data-x="-10000" data-y="100" data-z="0" data-scale="1">
Introduction
</div>
<div class="step" data-x="-10000" data-y="-1100" data-z="1000" data-scale="1">
<img src="images/Wallpaper-Abstract-Fractal-Flowers-Lilies.jpg" >
</div>
</div>
Right now it looks like below, but I'd like the image in the second slide to fill up the screen (maintaining aspect ratio).
Is there some way to zoom in by changing the data-scale or the camera angle? Or will some css tricks suffice? I started with the default example template.

You can use this CSS for image, I will work definitely.
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;

Add this to the css (X is the number of the step in question):
#step-X html,body{
margin:0;
height:100%;
overflow:hidden;
}
#step-X img{
min-height:100%;
min-width:100%;
height:auto;
width:auto;
position:absolute;
top:-100%; bottom:-100%;
left:-100%; right:-100%;
margin:auto;
}
and this to the html:
<div class="step" data-rel-x="2000" data-rel-y="0">
<img src="path/to/image.png" alt="">
</div>

I'm personnaly using the great object-fit: cover/contain; properties, and I set the size of the picture to the size of the viewport, and it's enough. Note that it also works with videos if you want.
.fitImage {
width: 100vw;
height: 100vh;
margin: 0;
padding:0;
background: black;
}
.fitImage img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="step fitImage" data-x="0" data-y="0" data-scale="2">
<img src="picture.png" />
</div>

This answer is pretty late. But it may help some googlers (all of us) later :)
The trick is to combine the attribute data-scale=2 (or a bigger number than 2) on the slide, thus we have <div class="step" data-scale=2></div>
Then we fill this slide with an image and increase the height and width attributes of the image. Finally we have something like this :
<div class="step" data-scale=2>
<img src="src/of/image.jpeg" style="position: absolute; left: 0px; top: 0px; z-index: -1; width: 9000px; height: 1000px">
</div>
We can combine data-scale and dimensions (height,width) of the image until we are satisfied with the quality of the image.
Please refer to this link for more details : Hinco (impress.js contributor) Blog

how to fix issue with images link on hover?

so i have 3 images they all are using the same code with different style of course first image is on left second image is in middle and third is on right.
bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center;
margin: 0px auto;
okay so the issue i'm having is when you are to hover on the image it can only hover the pointer on either top part of the image but when hovering over the image on bottom then it detects no link at all.
sample of code for image I'm using
<a href="/"><img style="width: 130px; height: 130px; border: 0px; display: inline;" src="img">
</a>
All of the images are different sizes but one the first image i resized the image to like 150px width and 100 width height then the hover start working but i want the image to be hover on 100px width and 50px height and when i do that it only hovers over right side of the image and this image is the first image on left. Second image i tried resizing but it only hovers on top of the image. any help will be appreciated :)

There's a problem in your CSS. All of your <div>'s containing the anchor tags and the images have a fixed position along with left: 0 which is why they are overlapping. You can achieve what you're trying to do like this, I've modified the HTML and added new CSS:
#images {
text-align: center;
}
#images a:nth-child(2) {
display: inline-block;
float: left;
}
#images a:last-child {
display: inline-block;
float: right;
}
<div id="images"><img style="width: 100px; height: 100px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></div>

I dont know exactly your need, from my understand you can do it as follow:
Add this css styles and hover the image:
#img1 {
bottom: 10;
left:0;
right:0;
position: fixed;
text-align:center;
margin: 0px auto
z-index:1;
}
#img1 img:hover {
width:100px !important;
height:50px !important;}
Fiddle:http://jsfiddle.net/1hwm3epj/16/

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/

To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?

If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO

try ..
$backWidth=$(window).width();
$backHeight=$(window).height();

As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>