We Keep Coding

Is it possible to achieve this zoom & pan effect on a direct image and not a div with a background-image?

I found this codepen showcasing a zoom and pan effect for images. As far as I can tell, the code works by assigning a background-image to each div based on its data-image attribute. Is there any way that I can do this on a direct img tag instead of a div with a background-image?
EDIT: This is the kind of mark-up I'm talking about. A container div with an actual img tag inside of it.

Take a look at the CodePen now.
Think i got it to look kinda like you want it
<div class="tiles">
<div data-scale="1.1" class="product-single__photos tile" id="ProductPhoto">
<img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/bluza_dama_39377a_large.jpg?v=1487178925" alt="Last Skirt" id="ProductPhotoImg">
</div>
</div>

You can play with the margin to adjust the image position
div{
width:100%;
height:200px;
overflow:hidden;
}
img{
width:100%;
margin:0%;
transition:0.5s;
}
img:hover{
width:120%;
margin:-10;
}
<div>
<img src="https://cdn.pixabay.com/photo/2015/07/06/13/58/arlberg-pass-833326_960_720.jpg">
</div>

Absolutely. It would involve giving the elements some CSS:
div.product-single__photos {
position: relative;
overflow: hidden;
}
div.product-single__photos > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
And have the Javascript manipulate the <img>'s width, height, top and left properties.

How to eliminate the flicker from this JQuery/CSS3 Animation

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)

Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )

I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.

How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

I've been piecing together code and tweeking it to eventually come together with this. The code itself is fairly simple and basically just saying that once someone visits the page for the first time then drop a cookie and no longer display it for the visitor when he visits the page, well for 365 days. My only issue is that once the div loads and loads out, I can't figure out how to fade in and fade out the background, I can only fade the div itself. I've tried wrapping it in a overlay div but I think I'm approaching it all wrong.
The code looks a bit much on here so I've attached a jsfiddle for a working example: http://jsfiddle.net/newbieturd/F29uv/
** Note: Once you run the fiddle once, you will have to clear your cookie. The DIV only appears once
CSS:
#welcome {
box-sizing:border-box;
padding:34px 18px 18px 18px;
height:120px;
width:300px;
background:Salmon;
color:#f9f9f9;
border-radius:6px;
position:absolute;
top:50%;
left:50%;
margin:-60px 0 0 -150px;
font:300 normal 1.4em/1.2 'Signika', sans-serif;
display:none;
}
#close {
height:30px;
width:30px;
background:url('http://www.omagdigital.com/images/articles/WebArticle-CloseButton.png') no-repeat;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}
JS:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){var pluses=/\+/g;function raw(s){return s;}function decoded(s){return decodeURIComponent(s.replace(pluses,' '));}function converted(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\');}try{return config.json?JSON.parse(s):s;}catch(er){}}var config=$.cookie=function(key,value,options){if(value!==undefined){options=$.extend({},config.defaults,options);if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}value=config.json?JSON.stringify(value):String(value);return(document.cookie=[config.raw?key:encodeURIComponent(key),'=',config.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}var decode=config.raw?raw:decoded;var cookies=document.cookie.split('; ');var result=key?undefined:{};for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split('=');var name=decode(parts.shift());var cookie=decode(parts.join('='));if(key&&key===name){result=converted(cookie);break;}if(!key){result[name]=converted(cookie);}}return result;};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)!==undefined){$.cookie(key,'',$.extend({},options,{expires:-1}));return true;}return false;};}));
function setCookie() {
$.cookie("visited", "true", { expires: 365 });
}
if ($.cookie('visited') != 'true') {
$('#welcome').show(1800);
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(1800);
});
// $.cookie("visited", null);
});//]]>
</script>
HTML:
<div id="welcome">
<span id="close"></span>
Interstitial Message. You will only see this message once every 365 days.
</div>
<p> Hello World. </p>

Is this what you are looking for? I gave the popup a parent container that will serve as the overlay.
HTML:
<div class="overlay">
<div id="welcome">
<span id="close"></span>
This is the only time you will see this message :)
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
jQuery:
if ($.cookie('visited') != 'true') {
$('#welcome, .overlay').show(100); // If the condiditon is true then show overlay
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(100); // Can also be added to this jQuery selector but the animation was odd
$('.overlay').fadeOut(100); // Fades out on click
});
Finally the fiddle: DEMO

Give your #welcome div a z-index (11 for example) and add css to give your document body full height and width:
html, body {
height: 100%;
width: 100%;
}
You're going to add a glass pane div to the body and it needs a height and width to fill the body of the page which, in your current example, has no height or width set
And then add a background div with a color of your choosing and a z-index less than your #welcome div such as:
<div id="glass_pane" style="width: 100%; height: 100%; z-index: 10; position: absolute: top: 0px; left: 0px; background-color: #000;"></div>
Ans then fade it in or out, remove it when you like, change the transparency

How to make divs rise up from other divs?

I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.

What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);

HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/

Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!

You don't need JS for that, just use css3 transitions.

Create a dimmed background on-click

Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.

Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off

You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}

HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}