Material Design: Expanding Circle – Talking HTML

A very basic tutorial on how to build a Material Design expanding circle as seen on Google products.
Smashing Magazine Transition article
Material Design Instructions
https://design.google.com/
HTML
<div class=”container_circle”>
<div class=”circle circle1″>
<!– <img src=”YOUR-URL-IMAGE.png”> –>
<p>+</p>
</div>
<div class=”circle circle2″><p><a href=””>t</a></p></div>
<div class=”circle circle3″><p><a href=””>f</a></p></div>
<div class=”circle circle4″><p><a href=””>g+</a></p></div>
</div>
CSS
.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
border-radius:50%;
position: fixed;
bottom: 10px;
right: 10px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.circle p {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: bold;
}
.circle1
{
background-color:#db4531;
z-index: 4;
}
.circle2
{
background: #00aced;
z-index: 3;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}
.container_circle:hover .circle2
{
bottom:75px;
}
.container_circle:hover .circle3
{
bottom:140px;
}
.container_circle:hover .circle4
{
bottom:205px;
}
 

Om Podcasten

This is an audio online podcast thing for the beginner coder. HTML, CSS, WordPress and other topics will be discussed as well as video tutorials and live feeds. Maybe even some interviews.