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>

div background ease with transparent overlay on hover

I have created a div that has a transparent overlay when user hovers on it. How is it possible to make the background image ease slightly to create a nice effect when the overlay happens. An example would be something similar to what is happening on the work section of this website.
HTML
<ul class="portfolio-project-image">
<li><a href="images/flyer_mock_up.jpg">
<span>
Marks & Spencer
<span>Summer Fete A5 Flyers</span>
</span>
</a>
</li>
CSS
body{
font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
}
ul.portfolio-project-image{
margin:10px;
padding:0;
text-decoration:none;
list-style-type:none;
}
ul.portfolio-project-image li a,
ul.portfolio-project-image li a>span{
display:block;
width:200px;
height:300px;
text-align:center;
background:#fabada;
position:relative;
box-sizing:border-box;
overflow:hidden;
}
ul.portfolio-project-image li span{
display:block;
}
ul.portfolio-project-image li a>span{
padding-top:80px;
background:#fe0;
position:absolute;
top:-100%;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
ul.portfolio-project-image li a:hover>span{
top:0%;
}
See the demo in my JFIDDLE

i think this person may have what you are looking for
https://jsfiddle.net/NewsletterPolls/yy4q7jqg/
body{
font: 200 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
}
ul.portfolio-project-image{
margin:10px;
padding:0;
text-decoration:none;
list-style-type:none;
}
ul.portfolio-project-image li a,
ul.portfolio-project-image li a>span{
display:block;
width:200px;
height:300px;
text-align:center;
background:#fabada;
position:relative;
box-sizing:border-box;
overflow:hidden;
}
ul.portfolio-project-image li a {
background-image: url(http://placekitten.com/g/200/300);
background-size: 200px 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: .5s;
transition: .5s;
}
ul.portfolio-project-image li a:hover {
background-size: 300px 150%;
}
ul.portfolio-project-image li span{
display:block;
}
ul.portfolio-project-image li a>span{
padding-top:80px;
background:#fe0;
opacity: .8;
position:absolute;
top:0%;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
ul.portfolio-project-image li a:hover>span{
top:-100%;
}
<ul class="portfolio-project-image">
<li><a href="images/flyer_mock_up.jpg">
<span>
Marks & Spencer
<span>Summer Fete A5 Flyers</span>
</span>
</a>
</li>
</ul>
added opacity to make this example more like the link you provided

You might want to do something with opacity.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
dont know what exacly you are meaning.

If you are referring to the zoom effect that occurs when hovering then it's this:
transform: scale(1.04);
Or if you are referring the to fade then you simply need to animate the opacity from 0 to 1 when you hover as described above.
Edit both the scale and opacity and you will have replicated the effect on the work section of the webpage you posted

Just pass the opacity in the ☑ CSS rule, ☑ and in the :hover pseudoclass, and ☑ set all in the transitions property:
ul.portfolio-project-image li a>span{
opacity: 0;
transition: all 0.3s ease-in-out;
}
ul.portfolio-project-image li a:hover>span { opacity: 1; }
You can also pass a background image to the fade-in element, as you can see here:
working demo.

Wordpress mega menu widget mobile styling issues with existing template

This is my website - http://pl.bodwell.edu. Its a Wordpress site running a customized template(http://sketchthemes.com/samples/invert-business-demo/) and a widget called Max Mega menu(http://www.maxmegamenu.com/).
The problem I've got is that with the template's top nav bar and the nested menu when in mobile view. The nav bar is supposed to shrink as the user scrolls down the page. The menu and nav bar work great together in desktop screen size above 1024px width. However, when the viewport is shrunk below that, and the mobile menu triggers and replaces the full width menu that's when I have a problem.
The mobile menu works great when the page is at the top and the full header is in effect. But, when you scroll down and the minimal header comes into play, the mobile menu shifts up and covers the on/off toggle so the user cannot toggle the menu on and off - unless they scroll back all the way up, and the menu appears below the toggle (which is what I want). I've been using Firebug to see what the proper CSS selector is so I can forcefully shift the menu down, but I cannot for the life of me figure it out. I am not sure if it has something to do with the templates javascript that is responsible for minimizing the top header when scrolling down the page.
So I don't know if this is a purely CSS problem, a JS problem, or a combination of both.
Here is my CSS as it pertains to the menu styling.
#header.skehead-headernav-shrink { height: 60px; }
#skenav {background:none repeat scroll 0 0 transparent; display:block; margin-left:auto; margin-
right:auto; border:medium none; }
#skenav .ske-menu, ul.menu { font-size: 13px; margin: 0px; display:inline-block; width:auto;
float:right; }
#skenav .ske-menu ul.menu { list-style: none; margin: 0; }
#skenav .ske-menu .menu li, ul.menu li { float: left; position: relative; margin-left: 0px;
list-style: none outside none; }
#skenav a {color: #333333;display: block;font-size: 13px; text-transform:uppercase; line-height:
85px; padding: 0 22px;text-decoration: none;
transition: color 0.1s linear 0s, background 0.1s linear 0s; -webkit-transition: color 0.1s
linear 0s, background 0.1s linear 0s; -moz-transition: color 0.1s linear 0s, background 0.1s
linear 0s; -o-transition: color 0.1s linear 0s, background 0.1s linear 0s; }
#skenav ul ul { position: absolute; top: 100%; left: 0px; float: left; width: 200px; z-index:
99999; }
#skenav ul .sub-menu li ,#skenav ul ul li { display: block; width:100%; }
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child { border-top: none; }
#skenav ul ul li{ border-top: 1px solid rgba(0,0,0,.15); }
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{ left: 100%; top: 0px !important; border-top: 0 none;margin-top:0; }
#skenav ul ul a { line-height: 1.2em; font-size: 13px; padding: 10px 20px; width: auto; height: auto; color: #FFFFFF; }
#header.skehead-headernav-shrink #skenav ul ul a { line-height: 1.2em; }
#skenav ul li:hover{ z-index:999999999999; }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover { color: #fff; }
If anybody out there has the inclination to take a look at my site and help me out, I would truly appreciate it.

#header.skehead-headernav-shrink {
height: 60px;
}
#skenav {
background:none repeat scroll 0 0 transparent;
display:block;
margin-left:auto;
margin- right:auto;
border:medium none;
}
#skenav .ske-menu, ul.menu {
font-size: 13px;
margin: 0px;
display:inline-block;
width:auto;
float:right;
}
#skenav .ske-menu ul.menu {
list-style: none;
margin: 0;
}
#skenav .ske-menu .menu li, ul.menu li {
float: left;
position: relative;
margin-left: 0px;
list-style: none outside none;
}
#skenav a {
color: #333333;
display: block;
font-size: 13px;
text-transform:uppercase;
line-height: 85px;
padding: 0 22px;
text-decoration: none;
transition: color 0.1s linear 0s, background 0.1s linear 0s;
-webkit-transition: color 0.1s linear 0s, background 0.1s linear 0s;
-moz-transition: color 0.1s linear 0s, background 0.1s linear 0s;
-o-transition: color 0.1s linear 0s, background 0.1s linear 0s;
}
#skenav ul ul {
position: absolute;
top: 100%;
left: 0px;
float: left;
width: 200px;
z-index: 99999;
}
#skenav ul .sub-menu li, #skenav ul ul li {
display: block;
width:100%;
}
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child {
border-top: none;
}
#skenav ul ul li {
border-top: 1px solid rgba(0, 0, 0, .15);
}
#skenav ul ul ul.sub-menu, #skenav ul ul ul.children {
left: 100%;
top: 0px !important;
border-top: 0 none;
margin-top:0;
}
#skenav ul ul a {
line-height: 1.2em;
font-size: 13px;
padding: 10px 20px;
width: auto;
height: auto;
color: #FFFFFF;
}
#header.skehead-headernav-shrink #skenav ul ul a {
line-height: 1.2em;
}
#skenav ul li:hover {
z-index:999999999999;
}
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {
color: #fff;
}

CSS Drop Down Menu - disappears too quickly on mouse out

I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?
I've set up a JS fiddle here.
<div id="menu" class="top">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio
<ul>
<li>Overview</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</div>
#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
color:#8dc63e;
}
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.8s;
-moz-transition: opacity 0.8s;
-ms-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
-transition: opacity 0.8s;
}
#menu ul li ul li {
display: block;
border-bottom: 1px solid #fff;
color: #fff;
padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px;
}

It seemed a bit of a mess, lots of duplication with display:none being set as well as opacity:0 and visibility:hidden. There are a few z-indexes in there as well. Not nice to maintain.
Really what you need is for the UL menu to be opacity 0, with a transition to fade it in over time, but not too quick, and then the hover state to be opacity 1.
So from fiddling with your fiddle...
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
-webkit-transiton: opacity 8s;
-moz-transition: opacity 8s;
-ms-transition: opacity 8s;
-o-transition: opacity 8s;
-transition: opacity 8s;
}
and
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
This one works, http://jsfiddle.net/ydF3B/1/ although I set the transition to be 8s from 0.8s... you might want to dig through and remove all the unneccessary styles and see what is actually going on.
Have fun :)
EDIT Complete justification for my earlier comment about wanting to dig through it all, the fiddle above doesn't solve your issue as pointed out in the comments :) Instead a better approach is to make the area you are hovering over larger, so that when you pass over from the menu item onto the menu, there is no actual gap, even though there is a visual gap. I did this by increasing the padding: http://jsfiddle.net/ydF3B/2/

Make in formation boxes with javascript and CSS

I would like to make information boxes like this one:
http://mmarfil.com/
[mouseover to see]

That particular site uses jQuery fadeIn and fadeOut to show an image (an actual png) of the tooltip like this:
$('.toggle').hover(
function(){
$('#baloon').fadeIn('normal');
}, function() {
$('#baloon').fadeOut('normal');
});
The image is positioned above the box using the css fixed positioning:
position: fixed;
margin-left: X px;
margin-top: Y px;
Similar results can be achieved using html, positioning a div instead of an image.

You only need CSS for that...
CSS:
a:link,
a:visited {
position:relative;
text-decoration:none;
}
a .tooltip img {
border:none;
}
.tooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:15px;
font-family:Verdana,sans-serif;
font-size:15px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
}
.tooltip:before,
.tooltip:after {
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.tooltip:before {
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
/* hover */
a:hover .tooltip {
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
CSS color-scheme class:
.tooltip.green {
color:#445400;
background:#8DB600;
background:-moz-linear-gradient(top,rgba(141,182,0,0.8),rgba(141,182,0,1));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(141,182,0,0.8)),to(rgba(141,182,0,1)));
border-color:#7C9902;
}
Usage:
bistre<span class="tooltip green">THIS IS A TOOOOOLTIPP!!!/span>