Develop Reference

How would I go about creating the hover animation for the nav in this website?

The website is https://ceremonycoffee.com/. How do I replicate their nav hover animation with the underline? I can't really find it in their inspect element. Also, is it made from CSS or Javascript? Thank you!

You can do it in full css, see this snippet :
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<h2>My Link</h2>
It relies on the ::before pseudo element. You set its horizontal scale to zero, add a transition property so that when hovered it transforms smoothly to the full link scale.
Source and explanation : Animating Links Underline

Bug animation in translate with percentage on Safari/iOS adding via JavaScript

I think I found a bug related with percentages on Safari in the animations. I would like to know if really it is a bug or a Safari custom.
Explanation of the bug:
On Safari or iOS when you start an animation with a translate with percentages, the position is wrong and the animation is shown in another place.
In the next example, the square should not move because the transform is the same and it should start with a 10% 10% "margin" of its size. The bug occurs when it is adding via JavaScript after some time (like 500 ms).
If you see the bug, you will see a jump from 0 0 to 10% 10% in Safari and iOS.
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
-webkit-transform: translate(10%, 10%);
-webkit-animation: 1s bugAnimation;
}
#-webkit-keyframes bugAnimation {
from {
-webkit-transform: translate(10%, 10%);
background: blue; /* To see the animation */
}
to {
-webkit-transform: translate(10%, 10%);
background: red; /* To see the animation */
}
}
Possible solutions:
Changing the percentage values by viewport units or another.
Obviously that options is not valid for all cases because I need the percentage but it could be a small solution for now if I know the size of the div (vw, vh, px...).
Do somebody know this bug?
Tested on Safari 10.1.1 and iOS 9.3.1 (with webview).
EDIT:
Really I need the translate2D because I am rotating a DIV in the center of the page and the size is unknown, an example:
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-webkit-animation: 1s bugAnimation;
-webkit-transform-origin: center center;
}
#-webkit-keyframes bugAnimation {
from {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
}
to {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
}
}

Ok, a workaround maybe using em instead of %
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
-webkit-animation: 1s bugAnimation forwards;
}
#-webkit-keyframes bugAnimation {
from {
-webkit-transform: translate(0, 0);
background: blue; /* To see the animation */
}
to {
-webkit-transform: translate(1.3em, 1.3em);
background: red; /* To see the animation */
}
}
Ok, please take another look at that approach. I wondered why you are using keyframed animation. Maybe the example is not representative but in this case you can just animate with a simple transition. Please take another look here:
setTimeout(function() {
document.getElementById("div").classList.add("animated");
}, 1000);
div {
background: red;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
}
.animated {
transform: translate(-50%, -50%) rotate(360deg);
}
<div id="div"></div>

Looks like a Mac Safari issue,
I removed -webkit-transform property from keyframes which fixes the jumping problem on Safari and also works fine on Chrome too. Try this code,
var div = document.createElement('div');
setTimeout( function(){
document.body.appendChild(div);
}, 500);
div {
background: red;
width: 200px;
height: 200px;
-webkit-transform: translate(10%, 10%);
-webkit-animation: 1s bugAnimation;
}
#-webkit-keyframes bugAnimation {
from {
background: blue; /* To see the animation */
}
to {
background: red; /* To see the animation */
}
}

Can't get div overflow to work properly

I'm hoping someone can help me with an issue I'm running into. I'm trying to set up a series of photos. That have this CSS/HTML property:
http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
I actually got the code from this site.
But there will be upwards of 30 photos, so I was hoping to put them inside a scrolling box/area about 400h x 700w px. When I add the scrolling box, either by HTML, or CSS the results are the same. There is a box, with no scrolling. And all photo's have been shrunken down to fit inside of the box.
Can anyone PLEASE help me with this?
Thanks.

What I've done is removed the CSS for the .container element, in case you want to keep that for a different purpose, and added a .scroller element as a wrapper around the images (within the .container). If you don't have another use for the .container, you can replace .scroller in the CSS with .container, and remove the .container I added to the HTML. A little wordy, so if you need an easier explanation let me know.
So the HTML changes in that there's a new <div> with class scroller surrounding the <article> elements.
The CSS adds the .scroller class, and another rule just to space the images apart a little bit:
.scroller{
margin:0px auto;
height:400px;
max-height:400px;
width:700px;
max-width:700px;
padding:10px 20px;
border:1px solid #aaa;
overflow-y:scroll;
}
.scroller article:not(:last-child){
margin-bottom:10px;
}
Fiddle: http://jsfiddle.net/435rx66s/

What is this scroll box / area?
You've given us this code that you referenced in your implementation, but where is your implementation for us to reference?
The given code works well if you are creating more articles within that container. Give the container a fixed height and set overflow to auto and there should be no problem with getting this content to sit within a scrolling box.
https://jsfiddle.net/i_like_robots/7GvV2/
.container {
height:200px;
overflow:auto;
position:relative;
margin: 0 auto;
max-width: 480px;
}

if you're open to a bit of jquery, there's quite a simple solution.
a short jquery function
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
will show your articles in turn.
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
#container {
margin:0 auto;
max-width: 480px;
max-height:240px;
overflow:hidden;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
article{max-width:480px; max-height:240px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Michigan</h1>
<p class="caption__overlay__content">
Some dummy text for testing
</p>
</div>
</article>
</div>
</div>

How can I recreate this masking effect in CSS/JavaScript?

I'm trying to recreate the effect shown in the gif here. It's fine even to have two separate images - I don't need to recreate the greyscale/blur effect (although I can with webkit filters) - it's just the masking that I'm having trouble with.
Basically I've got a carousel slider, and as it slides left and right, the background underneath the current slide will be blurred, to make the text on top more visible. I can't manage to keep the background in the same place as the slider moves along as a mask. How can I recreate this?
edit: I've managed to figure this out: http://jsfiddle.net/9xk410wk/18/
I used CSS transforms in opposite directions:
.tile {
-webkit-transform: translate3d(-400px, 0px, 0px);
}
.blur > div {
-webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover {
-webkit-transform: translate3d(400px, 0px, 0px);
}
.tile:hover .blur > div {
-webkit-transform: translate3d(-400px, 0px, 0px);
}

You could use a webkit grayscale filter for this:
FIDDLE (hover over the image to see the effect)
Markup
<div class="pic">
<div class="mask">SLIDER</div>
</div>
CSS
.pic {
width:288px;
height: 214px;
background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) no-repeat;
position:relative;
overflow: hidden;
}
.pic:hover .mask {
-webkit-transform: translate3d(228px, 0, 0);
background-position: 100% 0;
}
.mask {
width: 60px;
height: 214px;
position: absolute;
left:0;
top:0;
color: #fff;
background: url(https://dl.dropboxusercontent.com/u/51558405/pic.png) 0 0 no-repeat;
-webkit-transition: all 1.5s linear;
transition: all 1.5s linear;
-webkit-transform: translate3d(0, 0, 0);
-webkit-filter: grayscale(100%);
z-index:1;
}

I'm not sure exactly the issue you are running into without seeing code, but here is a crude fiddle that I created which mimics the gif:
http://jsfiddle.net/z71g26by/
I just used a CSS3 linear animation and changed the opacity of the moving panel. I just used colors, but it should work the same with a background image.
CSS:
body {
/*To hide the horizontal scroller */
overflow: hidden;
}
.container {
width: 500px;
height: 420px;
background-color:blue;
}
.panel {
width: 200px;
height: 420px;
background-color: white;
opacity: .8;
-webkit-animation: move 5s linear infinite;
}
#-webkit-keyframes move {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
HTML:
<div class="container">
<div class="panel"><p>SLIDER</p></div>
</div>
Note: This only works in webkit, but you can add the appropriate pre-fixes to get it working in other browsers.

Animate LENGTH of border-bottom

I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
Any help is really appreciated.

Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

You can't have the border a different length to the element that it surrounds. However you can achieve a similar effect using just CSS - with a pseudo element. How about something like the following:
div:after{
position:absolute;
bottom:0;
left:50%;
height:1px;
width:0%;
background-color:#444;
display:block;
content:'';
transition:0.3s;
}
div:hover:after{
left:0;
width:100%;
}
JSFiddle

Its not border-bottom, it is done using css pusedo element :before
.navigation li a::before {
position: absolute;
bottom: -1px;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #fff;
display: block;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
}
.navigation li a::before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
}