Develop Reference

Create a popup container that distinguishes each button (so they don't all popup at once) [duplicate]

This question already has answers here:
jQuery $(this) keyword
(6 answers)
Closed 1 year ago.
I'm usually good with searching for my answer, but I can't seem to get this right. The setup I have for this pop-up is perfect (responsive, plays well with what's inside (shortcode) etc.) the problem I'm having is because I've retrofitted from a codepen, it's made for just 1 pop-up per page.
I'm trying to create a project gallery wherein they click an anchor and a container with a slider inside shows the project's work (it works perfectly, just for one popup) but with say potentially 15 project galleries (pop-ups) per page.
I'm a novice with regards to jQuery, so please be easy on me I am ALWAYS learning.
The HTML
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div><a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div>.</div>
</div>
I've also created a code pen to visually show you the issue:
https://codepen.io/John_Barbagallo/pen/dyVXOvV
Any help is much appreciated!

Your html code has a syntax error. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. See details
Why are you nesting these 2 pieces of code:
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
})
})
I think you should remove the part of the code that is duplicated.
$('.popup').addClass('is-visible'); this code means that all html elements containing the class popup will be added an is-visible class. This is lead to your error.
You should Jquery traversing to find popup belong to project clicked
Change it like this:
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
All code here:
$(document).ready(function(){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="project01" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project01]
</div>
</div>
</div>
<div>
<a href="#0" id="project02" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project02]
</div>
</div>
</div>
<div>.</div>
</div>

Hi what you need is to get the clicker, then find the pop in the parent of the clicker see below:
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
// Next line is what changed.
$(this).parent().find(".popup").addClass('is-visible');
});

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

How to create an iOS style dragging using HammerJS and CSS?

I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.

Window resize function not working for header navigation

I am working on a header navigation which has logo on the left and profile icon on the right in the middle there are some navigation links.
There is a left slide menu made which triggers in when window width is less than 700px. I have triggered slide left menu on window resize event as well. The main navigation has to shift to the responsive menu container on resizing the window width. However it is not working on window resize function.
Here is the codepen link i tried
$("#sidebarCollapse").on('click', function () {
$('#sidebar').toggleClass('active');
});
$(".main-nav li a").on('click', function(){
$(".main-nav li a").removeClass('active');
$(this).addClass('active');
});
// Menu Add Class Left
$(".hamburger-menu").click(function(){
$(".mob-menu").toggleClass("slide-left");
});
// Menu Add Class Close
$('.mdl-layout__obfuscator').click(function(){
$(".mob-menu").removeClass("slide-left");
});
var domWidth = $(window).width();
function moveElements() {
var mobMenu = $('.mob-menu'),
$mainNav = $('.main-nav'),
respNav = $('.resp-nav'),
mainHdr = $(".global-header");
if( domWidth < 700) {
//alert(domWidth);
$('.main-nav').appendTo('.resp-nav');
}
} .
$(window).on('load resize',function() {
// alert('hi');
moveElements();
$(window).resize(function() {
moveElements();
});
});
/* ---------------------------------------------------
GLOBAL HEADER PAGE
----------------------------------------------------- */
textarea,
input,
button {
outline: none;
}
.txtlabel {
font-size: 12px;
text-align: left;
color: #706e6b;
padding-bottom: 11px;
display: block;
}
.global-header {
width: 100%;
display: block;
height: 50px;
box-shadow: 0 2px 4px 0 #e8ebf3;
-moz-box-shadow: 0 2px 4px 0 #e8ebf3;
-webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
position: relative;
background-color: #f1f1f1;
}
.g-logo {
padding: 7px 24px;
float: left;
}
.m-g-logo {
display: none;
padding: 7px 20px;
float: left;
}
.hamburger-menu {
display: none;
}
.resp-nav {
margin-top: 20px;
float: left;
}
.mob-menu {
display: none;
padding: 10px;
box-shadow: 2px 0 3px 0 #b5b7bd;
-moz-box-shadow: 2px 0 3px 0 #b5b7bd;
-webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
/*position: fixed;*/
position: absolute;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 240px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.profile-info {
float: left;
width: 100%;
}
.profile-icon {
width: 23px;
height: 23px;
margin: 8px;
display: block;
}
.profpic {
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
background-color: #394961;
float: left;
margin: 5px 0px 5px 5px;
}
.profile-info span {
color: #626579;
font-size: 16px;
margin: 3px 0 0 3px;
}
.prof-name {
float: left;
width: 68%;
margin: 0 0 0 20px;
}
.prof-name a.link {
float: left;
margin: 0 10px 0 3px;
}
.prof-name a.link:first-child {
position: relative;
}
.prof-name a.link:first-child:after {
content: "|";
position: absolute;
right: -10px;
color: #9ea6a9;
}
.icon-hamburger {
height: 5px;
background-color: black;
margin: 6px 0;
width: 20px;
float: left;
border: none;
cursor: pointer;
}
.main-nav {
list-style: none;
float: left;
margin-left: 30px;
}
.main-nav li {
list-style: none;
float: left;
}
.main-nav li a {
color: #626579;
padding: 14px 30px;
display: block;
}
.main-nav li a:hover {
color: #00a0e7;
}
.main-nav li a.active {
color: #00a0e7;
border-bottom: 3px solid #00a0e7;
background-color: #eef0f6;
}
.nav-icon {
float: left;
padding: 10px;
}
.pull-right i[class^='icon-'] {
width: 32px;
height: 32px;
display: block;
}
.icon-search {
background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
}
.icon-notification {
background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
}
.icon-profile {
background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
position: relative;
margin-right: 30px;
border-radius: 50%;
}
.icon-profile:after {
background: url("../../imgs/global-header/page-1.svg") no-repeat;
display: block;
width: 9px;
height: 6px;
position: absolute;
content: "";
top: 14px;
right: -20px;
}
.icon-profile:before {
background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
display: block;
width: 16px;
height: 16px;
position: absolute;
content: "";
top: 7px;
right: 8px;
}
.nav-icon:hover {
background-color: transparent;
}
.nav-icon:not(.active):hover {
background-color: #eef0f6;
cursor: pointer;
}
.usage {
list-style: none;
}
.usage ul {
list-style: disc;
list-style-position: outside;
}
/* search */
.srch {
position: relative;
display: inline-block;
margin-right: 30px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.ui-front {
list-style: none!important;
background-color: #fff;
color: #626579;
font-size: 12px;
font-weight: 500;
width: 240px!important;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border: 1px solid #F1F5F6;
border-radius: 4px;
padding: 10px 8px!important;
}
.ui-front li {
padding: 8px 8px!important;
cursor: pointer;
}
.slide-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 99999;
}
.mdl-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.slide-left~.mdl-layout__obfuscator {
background-color: rgba(0, 0, 0, .5);
visibility: visible;
}
.slide-menu {
position: fixed;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 250px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
#media only screen and (max-width: 768px) {
.main-nav {
display: block;
width: 100%;
margin: 0;
}
.main-nav ul {
padding: 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.nav-icon:nth-child(3) {
display: none;
}
.g-logo {
display: none;
}
.m-g-logo {
display: block;
padding: 7px 24px;
float: left;
}
.hamburger-menu {
display: block;
}
.global-header .rightmenu {
position: absolute;
right: 12px;
}
.mob-menu {
display: block;
}
.global-header {
width: 100%;
display: block;
height: 500px;
}
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="global-header">
<div class="mob-menu">
<div class="profile-info">
<div class="profpic"><i class="profile-icon"></i></div>
<div class="prof-name">
<span>Marvin Duncan</span>
Profile
Logout
</div>
</div>
<div class="resp-nav"></div>
</div>
<div class="pull-left">
Logo
</div>
<nav class="main-nav">
<ul>
<li>Label 1</li>
<li>Label 2</li>
</ul>
</nav>
<div class="pull-right rightmenu">
<div class="nav-icon" title="Profile"><i class="icon-profile">☺</i></div>
</div>
<div class="mob-view">
<span class="hamburger-menu">
<button class="icon-hamburger"></button>
Logo
</span>
</div>
<div class="mdl-layout__obfuscator"></div>
</div>

The problem is probably because this line only happens once:
var domWidth = $(window).width();
You need to place that line of code within your moveElements function, so that it continually checks the width of the window.
Additionally, I'd suggest not using 'appendTo' to move something. It is tricky to move pieces of the DOM around like this and you can get in a mess easily. Better to use CSS to move the display of something. Or, if you can't achieve it with CSS alone - maybe have two instances, and show/hide them as needed.

change $(window).width(); to $(document).width();
i tried and it worked

Transition icon when hover

I've this code
.pictos {
display: block;
height: 70px;
margin: 160px 0 30px;
padding: 0 17%;
width: 100%;
}
.pictos > div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 50%;
display: table-row;
float: left;
height: 70px;
width: 70px;
margin: 0 0 0 50px;
}
.pictos a.standard:hover,
.pictos a.standard:focus {
background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% -39px rgba(120, 182, 55, 1);
}
.pictos > div a {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
}
/* Hide this */
.pictos > div .standard-hover {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
}
.pictos > div:first-child {} .pictos a.standard {
background: url("http://s11.postimg.org/91k4hiqe7/standard.png") no-repeat scroll 50% 50% rgba(255, 255, 255, 1);
}
.pictos a.standard:hover span,
.pictos a.standard span:hover,
.pictos a.standard span:focus,
.pictos a.standard:focus span {
display: block;
opacity: 1;
}
.pictos a span::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);
border-image: none;
border-style: solid;
border-width: 6px;
content: " ";
height: 0;
left: 50%;
margin-left: -6px;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.pictos a span {
background: none repeat scroll 0 0 #78b637;
border: medium none;
border-radius: 9px;
bottom: 50px;
color: #efefef;
font-family: "Montserrat-Regular", sans-serif;
font-size: 13px;
padding: 5px 0;
position: relative;
right: 77px;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
width: 200px;
}
<div class="pictos">
<div>
<a href="#" class="standard">
<span>standard</span>
</a>
<a href="#" class="standard-hover">
<span>standard</span>
</a>
</div>
</div>
What I want is when you hover the link, an white icon phone (like this http://s30.postimg.org/3l9qho5h9/standard_hover.png) appears from the bottom to the green circle. It happens when the first icon is moving to the top.
Thanks for the help.

Like this?
.pictos {
display: block;
height: 70px;
margin: 160px 0 30px;
padding: 0 17%;
width: 100%;
}
.pictos > div {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
border-radius: 50%;
display: table-row;
float: left;
height: 70px;
width: 70px;
margin: 0 0 0 50px;
}
/* new stuff: */
.pictos a.standard {
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 1);
/* set two background images: */
background-image: url("http://s11.postimg.org/91k4hiqe7/standard.png"),
url(http://s30.postimg.org/3l9qho5h9/standard_hover.png);
/* set positioning for them both individually: */
background-position: 50% 50%, 50% 39px;
}
.pictos a.standard:hover,
.pictos a.standard:focus {
/* when hovering, change background-color and both of the background-positions: */
background-color: rgba(120, 182, 55, 1);
background-position: 50% -39px, 50% 50%;
}
/* end of new stuff, removed some other unnecessary rules also*/
.pictos > div a {
border-radius: 50%;
display: inline-block;
height: 45px;
margin: 12px;
text-decoration: none;
text-indent: -9999px;
transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 45px;
position:relative;
}
.pictos a.standard:hover span,
.pictos a.standard span:hover,
.pictos a.standard span:focus,
.pictos a.standard:focus span {
display: block;
opacity: 1;
}
.pictos a span::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #78b637 rgba(120, 182, 55, 0) rgba(120, 182, 55, 0);
border-image: none;
border-style: solid;
border-width: 6px;
content: " ";
height: 0;
left: 50%;
margin-left: -6px;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
}
.pictos a span {
background: none repeat scroll 0 0 #78b637;
border: medium none;
border-radius: 9px;
color: #efefef;
font-family: "Montserrat-Regular", sans-serif;
font-size: 13px;
padding: 5px 0;
position: relative;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
width: 200px;
position:absolute;
top:-50px;
left:-77px;
opacity:0;
height:16px;
transition:opacity .4s;
}
<div class="pictos">
<div>
<a href="#" class="standard">
<span>standard</span>
</a>
</div>
</div>

I have started with a different approach, using pseudo elements to contain your icons, and animated them on hover.
I have also added an <a> tag to allow you to have text as well
.wrap {
display: inline-block;
padding: 5px;
background: lightgray;
border-radius: 10px;
}
.phone {
height: 50px;
width: 50px;
border-radius: 50%;
border: 10px solid gray;
position: relative;
overflow: hidden;
transition: all 0.6s;
margin: 0 auto;
}
.phone:before,
.phone:after {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(http://s11.postimg.org/91k4hiqe7/standard.png) no-repeat center;
background-size: 60%;
height: 50px;
width: 50px;
transition: all 0.6s;
}
.wrap:hover .phone:before {
top: -100%;
}
.phone:after {
top: 100%;
background: url(http://s30.postimg.org/3l9qho5h9/standard_hover.png) no-repeat center;
background-size: 60%;
}
.wrap:hover .phone:after {
top: 0;
}
.wrap:hover .phone {
background: green;
}
a, span {
transition: all 0.6s;
text-decoration: none;
display: inline-block;
width: 80px;
height: 20px;
border-radius: 10px;
color: white;
text-align: center;
position: relative;
margin: 0 auto;
margin-bottom:10px;
}
a span {
background: green;
opacity: 0;
display: inline-block;
}
.wrap:hover span {
opacity: 1;
}
span:before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
height: 10px;
width: 10px;
background: inherit;
}
<div class="wrap">
<a href="#"><span>Standard</span>
<div class="phone"></div>
</a>
</div>

Try this:
button {
-webkit-appearance: none;
-moz-appearance: none;
font-family: helvetica;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid lightgrey;
background-color: white;
border-radius: 50px;
border-width: 10px;
transition: all 1s;
overflow:hidden;
}
button:before{
content:'☎';
color: black;
font-size: 40px;
position: absolute;
top: -10px;
left: 6px;
transition: top 1s;
}
button:hover{
background-color: green;
}
button:hover:before{
top:-100px;
}
button:after{
content:'☎';
color: white;
font-size: 40px;
position: absolute;
top: 50px;
left: 7px;
transition: top 1s;
}
button:hover:after{
top: -10px;
}
<button />