Image Sharing App Concept - Plus Button Expanded

image-sharing-app-concept-plus-button-expanded.markdown

Image Sharing App Concept - Plus Button Expanded

Inspiration from https://dribbble.com/shots/3208361-Plus-expanded

Thanks Eddie Lobanovskiy for this amazing concept!

A Pen by Paresh Deshpande on CodePen.

License.

index.html

<br>
<b>Plus Expanded For More Options</b>
<br>
Click on plus to expand options and obviously minus would show less.
<br>
<div class="container">
  <div class="picture "></div>
 
  <div class="navigation">
    <div class="nav_btns">
      <i class=" icon-home" aria-hidden="true"></i>
      <i class="nav_btn icon-magnifier" aria-hidden="true"></i>
      <i class="nav_btn_r icon-bell" aria-hidden="true"></i>
      <i class="nav_btn icon-user" aria-hidden="true"></i>
    </div>
    <div id="plusButton" class="plus">
      <div class="plusHor"></div>
      <div class="plusVer "></div>
    </div>
  </div>
   <div class="options">
     <i class=" icon-camera" aria-hidden="true"></i>
     <i class=" icon-picture" aria-hidden="true"></i>
     <i class=" icon-camrecorder" aria-hidden="true"></i>
   </div> 
</div>

<div class=""></div>

script.js

//Inspiration from Eddie Lobanovskiy  https://dribbble.com/shots/3208361-Plus-expanded
//Thanks Eddie for this amazing concept.


//Jquery used only for toggling classes.

$('#plusButton').click(function(){
  $('.plusVer').toggleClass('plusVer_active');
  $('.picture').toggleClass('picture_up');
  $('.options').toggle();
  $('.options').toggleClass('options_show');
  $('.nav_btns').toggleClass('nav_btns_hide');
});
//on Hover
/*$("#plusButton").hover(function(){
     $('.plusVer').addClass('plusVer_active');
 	 $('.picture').addClass('picture_up');
 	 $('.options').show();
 	 $('.options').addClass('options_show');
    }, function(){
   	 $('.plusVer').removeClass('plusVer_active');
 	 $('.picture').removeClass('picture_up');
 	 $('.options').hide();
 	 $('.options').removeClass('options_show');
});*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Raleway:300,700');
body{
  background:#4E347F;
  color:#FFF;
  margin:0;
  font-family: 'Raleway', sans-serif;
  text-align:center;
  letter-spacing:0.08em;
}
b{
  font-size:28px;
  color:#FFF;
  
}
.container{
  width:300px;
  height:500px;
  background:#fff;
  margin:10px auto;
  text-align:center;
  padding:0 12px 12px 12px; 
  overflow:hidden;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  border-top:12px solid white;
  
  .picture{
    position:relative;
    top:0;
    width:100%;
    height:445px;
  background:url('https://s-media-cache-ak0.pinimg.com/originals/24/8d/f5/248df520ef2048d0614c73f90b9de4ab.jpg');
    background-color:#CBB618;
    background-size:cover;
    transition:all 0.5s ease;
    animation: pictureDown 0.7s;
  	animation-fill-mode: forwards;
    }
  .picture_up{
    animation: pictureUp 0.7s;
  	animation-fill-mode: forwards;
    }
  
  .options{
    position:relative;
    bottom:110px;
    width:300px;
    height:37px;
  	display:none;
    opacity:0;
    padding: 15px 0 0 0;
    user-select:none;
    font-size:24px;
    color:#FFF;
    text-align:left;
    
    i{
      padding-left:52px;
    }
  }	
  .options_show{
  	animation: optionsDisplay 0.7s;
  	animation-fill-mode: forwards;
    opacity:1;
  }

  .navigation{
    width:100%;
    height:55px;
    position:relative;
    bottom:0;
    color:#4E347F;
    text-align:left;
    font-size:24px;
    
    .plus{
      position:absolute;
      top:50%;
      left:50%;
      width:34px;
      height:34px;
      transform:translate(-50%,-50%);
      cursor:pointer;
      
	.plusHor{
  		position:absolute;
  		left:50%;
  		top:50%;
  		transform:translate(-50%,-50%);
        width:24px;
     	height:2px;
      	background:#4E347F;
        }
    
	.plusVer{
  		position:absolute;
  		left:50%;
  		top:50%;
  		transform:translate(-50%,-50%);
  		width:2px;
     	height:24px;
      	background:#4E347F;
    	animation: deactivation 0.7s;
  		animation-fill-mode: forwards;
  		}
	.plusVer_active{
  		animation: activation 0.7s;
  		animation-fill-mode: forwards;
 		width:300px; height:55px; top:-38px;
  		}
      
      }  
    }
}

.nav_btns{
  
  padding-top:17px;
  padding-left:17px;
  animation: navShow 0.7s;
  animation-fill-mode: forwards;
  
  .nav_btn{
    margin-left:32px;
  }
  .nav_btn_r{
    margin-left:83px;
  }
}
.nav_btns_hide{
  animation: navHide 0.7s;
  animation-fill-mode: forwards;
}

@keyframes activation{
  0%{width:2px; height:34px; top:50%;}
  50%{width:2px; height:55px; top:-38px;}
  100%{width:300px; height:55px; top:-38px;}
  }
@keyframes deactivation{
  0%{width:300px; height:55px; top:-38px;}
  50%{width:2px; height:55px; top:-38px;}
  100%{width:2px; height:24px; top:50%;}
  }
@keyframes pictureUp{
  0%{top:0;}
  50%{top:-65px;}
  100%{top:-65px;}
  }
@keyframes pictureDown{
  0%{top:-65px;}
  50%{top:-65px;}
  100%{top:0;}
  }
@keyframes optionsDisplay{
  0%{opacity:0;}
  50%{opacity:0;}
  100%{opacity:1;}
  }
@keyframes navShow{
  0%{opacity:0;}
  50%{opacity:0;}
  100%{opacity:1;}
  }
@keyframes navHide{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:0;}
  }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />