We Keep Coding

scroll once and smoothly scroll next div on top of the other

I would like to create the same effect like on this website: https://www.razorfish.com
i've already set the item on top with the following css:
#first-block{
position:fixed;
top:100px;
width:760px;
margin-left:-380px;
left: 50%;
z-index: -99;
}
How can I achieve the effect like on the website. Do I need to use js or can I just handle it with css.
I thought to listen to a first scroll on the page with js and then add an css class with transition effect.
Does anyone now how to proceed or is it a correct way to listen to the first scroll and add class with transition effect?

You can achieve the same using CSS transform property to the background image.
transform: translate3d(0, 0, 0) scale(1);

CSS3, div not aligned properly after rotation

I am in front of a mystery: I have a box, the css defines the width of each side.
I use links to rotate the box, adding a class to show each side.
The link just clears the classes of the box, and adds one of the following class:
.show-front {
transform: rotateY(0deg);
}
.show-back {
transform: rotateY(-180deg);
}
.show-left {
transform: rotateY(-270deg);
}
.show-right {
transform: rotateY(-90deg);
}
However, depending on the side in front, the alignment of the div is not the same.
I isolated my problem and created a codepen at the following location: http://codepen.io/3MO/pen/XpwYBB
I check the dimensions and coordinates of each side brought to front, I cannot see the problem. What do I miss?
Thanks a lot in advance!

The divs don't fit inside the parrent.
You forgot the additional border-width on your boxSide divs.
Your #mainBox should have width: 1102px;.

background transition fix and background dim on hover [fiddle inside]

I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.
I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues
no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code
#circle_wrap{
position: absolute;
margin-top: -130px;
}
no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.
JSFIDDLE here
If anything couldn't be solved with css only, I'd accept jquery solution as well.
I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
Thank you.

Finally got so angry I am not able to do it with css that I made it with jquery :(
If anyone is interested here is the result
I have at least fixed the issue no1 with better css but the second is done with jquery.
solved no.1 with
.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}
and applying position:relative on its parent
and the solution for no.2 is
$(".circle_wrap").hover(function () {
$(this).siblings("img").css("opacity", "0.2");
},
function () {
$(this).siblings("img").css("opacity", "1");
});
EDIT: safari support
.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}

How to zoom in to the center of a div

I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!

You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle

Center AnythingSlider with hidden overflow on both sides

My goal is to have the slider 1280px wide and centered on the page. I would like the edges of the content to have hidden overflow on both sides. For example I want the center of content to always stay in the center of the page with each side being cut off as the browser is resized, with no horizontal scroll bar appearing.
Is there a straightforward way to accomplish this?

I ended up with a somewhat interesting solution that worked for me in (at least) Chrome, Firefox, and Safari where I tested it. It may be slightly hacky, but the result was cool.
So here's what I did: I put a .wrapper with a width of 1280px. The margin is 0 auto except the left margin which is where it all happens. The left margin needs to be set to half of the div width. In this case that would be 640px. However, because it must overflow outside of the left screen it must be set to a negative number (i.e. -640px). Then in order to reverse that effect when the screen is larger then screen a left:50% pushed it over the correct amount. Obviously in order for the margin:0 auto to actually work, the position must be set to relative (or absolute if you would like).
.wrapper { width:1280px;
margin:0 auto 0 -640px;
position:relative;
left:50%
}
the one problem
I found one problem with it, though. Because we are using negative margin, it pushes the div to the left to where one can not see if their screen or browser window is too small. Let me know if this is a problem and makes it to where it doesn't work for you.

Add this css class
.overflowbothsides{
vertical-align: middle;
margin: 0 auto;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
solution with code and example
enter link description here