We Keep Coding

Select Dropdown Material Design only CSS/JS

I have been working to create some input fields with Material Design Looking.
Sadly, I could not use the usual frameworks available on the internet (e.g. Materialize), so I need to develop it my own, I have almost everything created. Although, the select field dropdown with no results, I could not make it.
The goal is to look like the Simple Select with arrow of this git here
For now what I did is this on codepen
Do you know any source or example rather than the getmdl-select only with CSS(scss) and JS
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
$md-color-blue:#1074ac;
$md-color-black: rgba(0, 0, 0, 0.54);
/* ---- text field ----- */
.md-group{
position:relative;
margin: 35px 0;
// margin-bottom:45px;
.md-input__text{
background: transparent;
font-size:14px;
padding:5px 5px 2px 5px;
// display:block;
width:50%;
border:none;
border-bottom:1px solid #757575;
vertical-align: bottom;
}
.md-input__text:focus {
outline:none;
}
option:active,
option:hover, option:focus, {
background: rgba(0,0,0,.04);
}
}
/* LABEL */
.md-input__label {
color:rgba(0,0,0,.54);
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:-20px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
.md-input__text:focus ~ label, .md-input__text:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS */
.md-input__bar {
position:relative;
display:block;
width:50%;
background-color: rgba(0,0,0,.42);
}
.md-input__bar:before, .md-input__bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:$md-color-blue;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.md-input__bar:before {
left:50%;
}
.md-input__bar:after {
right:50%;
}
/* active state */
.md-input__text:focus ~ .md-input__bar:before, .md-input__text:focus ~ .md-input__bar:after {
width:50%;
}
/* HIGHLIGHTER */
.md-input__highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
.md-input__text:focus ~ .md-input__highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS */
#-webkit-keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
#-moz-keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
#keyframes inputHighlighter {
from { background:$md-color-blue; }
to { width:0; background:transparent; }
}
.md-btn__right{
position: absolute;
top: 1px;
right: 1px;
}
.md-autocomplete-clear{
display: none;
}
.md-input__text:focus ~ .md-autocomplete-clear {
display: block;
}
<div class="md-group">
<select class="md-input__text" required>
<option>Yes</option>
<option>No</option>
</select>
<span class="md-input__highlight"></span>
<span class="md-input__bar"></span>
<label class="md-input__label">Select</label>
</div>

how to animate image which is behind one image after hover that image?

basic html below i have given the basic html code.I am beginner in web development.
Here i am trying to first animate bottom class image when it hovers.Then after that animation i want to display another image and simultaneously apply bouncing effect to that image i have completed both the effects seperately.But dont know how to link that second image animation with the first one? suggest solution.
< div id="cf">
< img class="top" src="/home/animesh/Downloads/index.jpeg"/>
<img class="bottom" src="/home/animesh/Downloads/logo.jpg"/>
</div>
css code:
<style>
#cf img.top
{
height:170px;
width:170px;
margin-left:10px;
margin-top:10px;
}
#cf img.bottom
{
height:170px;
width:170px;
margin-left:10px;
margin-top:10px;
background:black;
}
#-webkit-keyframes cf
{
5%
{
box-shadow: 1px 1px 5px 1px #ffe6e6;
}
15%
{
box-shadow: 1px 1px 5px 2px #ff8080;
}
25%
{
box-shadow: 1px 1px 5px 3px #ff3333;
}
35%
{
box-shadow: 1px 1px 5px 2px #e60000;
}
75%
{
box-shadow: 1px 1px 5px 1px #cc0000;
}
85%
{
box-shadow: 1px 1px 5px 2px #ff3333;
}
95%
{
box-shadow: 1px 1px 5px 3px #ff9999;
}
100%
{
box-shadow: 1px 1px 5px 2px #ffffff;
}
}
#keyframes cf {
5%
{
box-shadow: 1px 1px 5px 1px #ffe6e6;
}
15%
{
box-shadow: 1px 1px 5px 2px #ff8080;
}
25%
{
box-shadow: 1px 1px 5px 3px #ff3333;
}
35%
{
box-shadow: 1px 1px 5px 2px #e60000;
}
50%
{
box-shadow: 1px 1px 5px 2px #990000;
}
75%
{
box-shadow: 1px 1px 5px 1px #cc0000;
}
85%
{
box-shadow: 1px 1px 5px 2px #ff3333;
}
95%
{
box-shadow: 1px 1px 5px 3px #ff9999;
}
100%
{
box-shadow: 1px 1px 5px 2px #ffffff;
}
}
#keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.bottom:hover {
opacity:0;
animation-name:cf;
animation-duration:1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#cf img.top:hover{
animation-name:bounce;
animation-duration:1s;
}
</style>

Issue with hover movement on navigation bar

I am working on a fictitious website for my portfolio and am stuck on why the hover is moving the words. It moves every time I hover over the word.
Here is the code:
nav{
position:fixed;
z-index:1000;
top:0;
bottom:0;
width:150px;
background-color:black;
color:white;
line-height:60px;
}
nav a{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.3s;
}
nav ul{
list-style-type:none;
margin-top:100px;
text-align:center;}
nav ul li a{
text-decoration: none;
display:inline-block;
text-align:center;
color:#fff;
}
nav a:hover {
background-color: #EBEBEB;
color: black;
margin: 0.5em 0;
display:block;
cursor:pointer;
}
nav a: hover: after{
text-decoration: none;
display:inline-block;
text-align:center;
color:#fff;
}
I really appreciate any feedback.

nav a:hover { background-color: #EBEBEB; color: black; margin:
0.5em 0; display:block; cursor:pointer; }
When you change the margin, the element will move. Change it to margin:0;
nav a:hover {
background-color: #EBEBEB;
color: black;
margin: 0;
display:block;
cursor:pointer;
}
If you want some sort of movement effect to happen without breaking the layout, you can try playing with position:relative and top:0.5em

Why is one CSS animation working Multiple Times, Another Only Once Per Pageload

Really stumped by this one... two animations, same structure basically, and the JavaScript
for them also the same, but one animation, will work as often as one wants to hover over
it and the other, works exactly one time on hovering, then goes away until the page is
manually refreshed.
Prepared a JSfiddle all prettied up
and if anyone wishes, the codeblock below is complete and ready to run if you
have your stack ready for testing; it would be ready to copy and paste and runs to
illustrate the problem.
Summary: why does the red opaque expanding div animation only run once?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<Head>
<Title>Bleu Goat F</title>
<meta http-equiv="X-UA-Compatible" ; content="text/html application/pdf text/plain text/css text/php; charset=utf-8"
;>
<link rel="stylesheet" type="text/css" href="Some Name CSS FuddleDuddle.css"
/>
<script type="text/JavaScript">
window.onload = function () {
var el = document.getElementById("el");
var button = document.getElementById("button");
el.addEventListener("webkitAnimationEnd", function (evt) {
el.className = "hidden";
}, false);
el.addEventListener("mouseover", function (evt) {
el.className = (window.WebKitAnimationEvent) ? "hiding" : "hidden";
}, false);
button.addEventListener("webkitAnimationEnd", function (evt) {
button.className = "bottomFADED";
}, false);
button.addEventListener("mouseover", function (evt) {
button.className = (window.WebKitAnimationEvent) ? "expandDown" : "bottomFADED";
}, false);
}
</script>
<style type="text/css">
/* 6:05 PM Monday, January 07, 2013
Animation code for teal color *div el*
Animation code for mouseover/reveal div *button* */
#el {
position:absolute;
top:7px;
left:17px;
width:153px;
height:32px;
background-color:teal;
border:1px solid white;
font-size:17px;
font-family:palatino linotype;
display:block;
cursor: pointer;
z-index:160;
}
div.hiding {
-webkit-animation-duration: 3s;
-webkit-animation-name: fade-out;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
}
div.hidden {
display: none;
}
#-webkit-keyframes fade-out {
from {
background-color:yellow;
opacity: .3;
}
to {
background-color:teal;
opacity: .9;
}
}
/* *************************************** */
/* Codeblock For Div Which **Should** become
visible upon hovering over Name there on the
Menu bar, and animate, increasing in size
downward and becomeing more opaque (redder)
then stopping, then finishing the animation and
disappearing.
*/
#-webkit-keyframes slidein {
from {
background-color:transparent;
width:62px;
height:25px;
}
to {
background-color:red;
opacity: 0.6;
width:62px;
height:73px;
}
}
#button {
position:absolute;
top:7px;
left:149px;
width:62px;
height:25px;
display: block;
z-index:100;
}
#button.bottomFADED {
display:none;
}
#button.expandDown {
-webkit-animation-duration: 2s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count:1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, margin 2s, color 2s, font-size 2s, z-index 1s;
position: absolute;
top:7px;
}
/* Below: the simple CSS transition on a div;
it is in the red square below *Name* item on
the brown Menu Bar.
It is triggered by a :hover. Not an animation,
and works reliably.
*/
#BlackAsHeidizHeart {
position:absolute;
top:32px;
left:107;
width:62px;
height:48px;
border:1px solid red;
z-index:100;
}
#suresureBOSS22 div {
position:absolute;
top:32px;
left:164px;
width:53px;
height:43px;
background-color:transparent;
color:#30000C;
border:1 solid transparent;
z-index:12;
font-family:French Script MT;
font-weight:bold;
font-style:oblique;
font-size:0px;
z-index:55;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, font-size 1s, border .3s;
-webkit-transition-timing-function: cubic-bezier(0.600, -0.230, 0.735, 0.845);
}
#suresureBOSS22 div:hover {
position:absolute;
top:32px;
left:164px;
width:151px;
height:47px;
background-color:green;
color:#30000C;
border:2px solid white;
z-index:12;
font-family:French Script MT;
font-weight:bold;
font-style:oblique;
font-size:15px;
z-index:55;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, font-size 1s, border 3s;
-webkit-transition-timing-function: cubic-bezier(0.600, -0.230, 0.735, 0.845);
}
/* ************************* */
/* The uninteresting page~stuff */
/* body */
#VerdadSIxCorpusZsestyJa {
background-color:#A9D4B6;
color:black;
font- size:12px;
color:black;
}
/* main div */
#BigPicturesScreen {
position:absolute;
top:3px;
left:3px;
width:97%;
height:273px;
background-color: #112299;
color:black;
border-top-color: rgb(198, 132, 19);
border-top-style: inset;
border-top-width: 3px;
border-right-color: rgb(198, 132, 19);
border-right-style: inset;
border-right-width: 3px;
border-bottom-color: rgb(198, 132, 19);
border-bottom-style: inset;
border-bottom-width: 3px;
border-left-color: rgb(198, 132, 19);
border-left-style: inset;
border-left-width: 3px;
font-size:31px;
font-family:bookman old style;
font-style:normal;
z-index:2;
}
/* top outter div */
#SequesterJSFiddleCODE {
position:absolute;
top:47px;
left:19px;
width:200px;
height:53px;
background-color:#8DA57C;
border:2px solid forestgreen;
font-size:17px;
font-family:tahoma;
z-index:140;
}
/* grey div with green border, holds MenuBar */
#CODExSnippetNumberSupport {
position:absolute;
top:173px;
left:5px;
width:273px;
height:74px;
background-color:lightgrey;
border:3px solid forestgreen;
-webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
font-size:11px;
font-family:tahoma;
padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:12px;
z-index:10;
}
/* the lower, Menue Bar, dark brown */
#TitleOfTitleThingyie {
position:absolute;
top:3px;
left:16px;
width:237px;
height:19px;
background-color:#30000C;
color:white;
border:4px solid #AFEF23;
-webkit-border-radius: 1.2em 1.2em 1.2em 1.2em;
font-size:14px;
font-family:bookman old style;
padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:12px;
z-index:15;
}
/* the div holding that 7, on Menu Bar */
#JobCrrnt {
position:absolute;
top:0px;
left:79px;
width:29px;
height:19px;
background-color:#30000C;
color:white;
border:none;
font-size:14px;
font-family:bookman old style;
padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:12px;
z-index:15;
}
</style>
</head>
<body id="VerdadSIxCorpusZsestyJa">
<div id="BigPicturesScreen">
<div id="SequesterJSFiddleCODE">
<br />
<div id="el">Hide Me &nbsp&nbsp&nbsp*div el*</div>
<!-- el -->
</div>
<!-- SequesterJSFiddleCODE -->
<div id="CODExSnippetNumberSupport">
<div id="Shellnum1" class="hover">
<div id="suresureBOSS22" class="hover">
<div id="BlackAsHeidizHeart" class="hover">Why Must WE, Suffer?
<br />HA! why not :)</div>
</div>
<!-- suresureBOSS22 -->
</div>
<!-- Shellnum1 -->
<div id="TitleOfTitleThingyie">&nbsp&nbsp&nbsp Job #
<div id="JobCrrnt">&nbsp&nbsp 7</div>&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp Name</div>
<!-- TitleOfTitleThingyie -->
</div>
<!-- CODExSnippetNumberSupport -->
</div>
<!-- BigPictureScreen -->
<body>
</html>

-webkit-animation:slidein 5s infinite; /* Safari and Chrome */
you dont have to hide (add display:none) after animation end
link to fiddle

I think the reason for that is -webkit-animation-iteration-count: 1;
Replace with:
#button.expandDown {
-webkit-animation-duration: 2s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, margin 2s, color 2s, font-size 2s, z-index 1s;
position: absolute;
top:7px;
}
Fiddle at: http://jsfiddle.net/HVH6K/44/

animate borders

I have this jquery code.
//this is the main javascript
$(document).ready(function(){
$('nav.menu a').hover(
function () {
$('nav.menu').find(".current_item").removeClass("current_item");
$(this).addClass("current_item");
},
function () {
$(this).removeClass("current_item");
$('nav.menu').find(".damenu").addClass("current_item")
}
);
});
and this html structure
<nav class="menu">
Home
Gallery
Portfolio
About
Contact
</nav>
and this css
.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial, Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.current_item /*, .menu a:hover*/
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 !important;
border-bottom: 3px solid #C5F700 !important;
}
as you can see, the routine is this, there is a class for the current menu and whenever a user hover into one of the menu, the class of the current menu is removed and a class "current_item" added to the current hover menu and in mouseout event, the class "current_item" is removed from the current hovered element and the class "current_item" is added back to the current menu which has also a class of "damenu" and as you can see the work of the class "current_item" is to add top and bottom borders and it works good, but I want to add some animation into the borders or in the class "current_item" when mouseover or in mouseout.
So precisely, I want to animate the borders or the class "current_item" whenever in mouseover or mouseout event and also, is there anyway I can make the nav into center?
I am open in, Ideas, recommendation and suggestion. Hope someone here could help, thank you.

Can you not just add the following to .current_item?
-webkit-transition: .5s border-color, color ease;
-moz-transition: .5s border-color, color ease;
-ms-transition: .5s border-color, color ease;
-o-transition: .5s border-color, color ease;
transition: .5s border-color, color, ease;

You may animate border by only css
.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial, Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
-ms-transition: 1s all ease;
-o-transition: 1s all ease;
transition: 1s all ease;
}
.menu a.current_item, .menu a:hover
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 ;
border-bottom: 3px solid #C5F700 ;
}

Get JQuery color animation plugin, then:
$('#currentitem').hover(function(){
(this).animate({borderColor:'#fff'});
}, function(){
(this).animate({borderColor:'#000'});
});