Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image Sharing App Concept - Plus Button Expanded
<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>
//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');
});*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
@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;}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment