multi-clouds open :hover text

In this example below you will see how to do a multi-clouds open :hover text with some HTML / CSS and Javascript

thanks to @Ribardb

Thumbnail
This awesome code was written by 10tribu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 10tribu ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>multi-clouds open :hover text</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
<ul id="wrap">
	<li class="cloud medium"></li>
	<li class="cloud small "></li>
    <li class="cloud inverted "></li>
    <li class="cloud xsmall "></li>
    <li class="cloud small"></li>
</ul>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/10tribu/multi-clouds-open-hover-text-dGyoD */
/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, 
button,form, fieldset, input, textarea {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {line-height: 1;font-family: "hevetica",sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal;}
caption, th { text-align: left; font-weight: normal; font-style: normal;}

/*CSS cloud*/
*{
transition: all 0.5s ease;}

body{
background-color : #aaddee;
background: radial-gradient(center, circle farthest-side, #DFEAEF 0%, #B2CFDC 100%);
}
#wrap{
position: relative;
display: block;
margin :250px auto 0;
height:auto;
width:400px;
border-radius: 25px;
background:transparent;
transition: all  750ms ease-in 125ms;
}
#wrap:hover{
background:rgba(255,255,255,0.25);
border: 2px dashed rgba(255,255,255,0.75);
}
#wrap:before{
position: absolute;
content: "Hover Me";
font-size: 20px;
text-align: center;
color:#FFF ;
text-indent: 100px;
margin-top: 27px;
transition: all  500ms ease-out 250ms;
}
#wrap:hover:before{
content: "Hello from the Clouds";
font-size: 40px;
}
.cloud{
  height : 150px ;
  width : 400px;
  border-radius: 100px;
  margin-top: -125px;
  top : 0px;
  z-index : 0;
  background: white;
  position:absolute;
  transition: all  500ms ease-out 150ms;
}
.cloud:before{
  height: 150px;
  width : 150px;
 top:-70px;
  left:50px;
}
.cloud:after{
  height: 200px;
  width : 200px;
 top:-110px;
  left:150px;
}

.cloud:before, 
.cloud:after{
	background: white;
	content: '';
	position:absolute;
	border-radius: 50%;
box-shadow: inset 2px 4px 2px rgba(235,245,255,0.9),inset 4px 15px 15px rgba(235,245,255,0.2),inset 3px 2px 2px rgba(230,230,230,0.5),-10px -10px 15px rgba(255,255,255,0.1),0px -10px 15px rgba(255,255,255,0.3), 0 -10px 10px -5px rgba(0, 0, 0, 0.05);
}
#wrap li:first-child{margin-left: 50%;top: 50px;}
#wrap li:last-child{margin-right: 50%}
#wrap:hover li.cloud{
position: relative;
margin-top: -125px;
left : 400px;
box-shadow:0 2px 1px 0px #CCCCCC, 0 4px 1px -1px #CBCBCB, 0 6px 1px -2px #C9C9C9, 0 8px 1px -3px #BFBFBF, 0 10px 1px -4px #BBBBBB, 0 12px 1px -5px #BABABA, 0 14px 1px -6px #B9B9B9, 0 16px 1px -7px #AEAEAE, 0 18px 1px -8px #AAAAAA, 0 20px 1px -9px #A4A3A3, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 4px -6px rgba(0, 0, 0, 0.9), 0 45px 5px -5px rgba(0, 0, 0, 0.05), 0 35px 10px -5px rgba(0, 0, 0, 0.1), 0 25px 55px 5px rgba(0, 0, 0, 0.15), 0 0 3px white inset,0px 10px 15px rgba(255,255,255,0.3);
-moz-box-shadow:0 2px 1px 0px #CCCCCC, 0 4px 1px -1px #CBCBCB, 0 6px 1px -2px #C9C9C9, 0 8px 1px -3px #BFBFBF, 0 10px 1px -4px #BBBBBB, 0 12px 1px -5px #BABABA, 0 14px 1px -6px #B9B9B9, 0 16px 1px -7px #AEAEAE, 0 18px 1px -8px #AAAAAA, 0 20px 1px -9px #A4A3A3, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 4px -6px rgba(0, 0, 0, 0.9), 0 45px 5px -5px rgba(0, 0, 0, 0.05), 0 35px 10px -5px rgba(0, 0, 0, 0.1), 0 25px 55px 5px rgba(0, 0, 0, 0.15), 0 0 3px white inset,0px 10px 15px rgba(255,255,255,0.3);
-webkit-box-shadow:0 2px 1px 0px #CCCCCC, 0 4px 1px -1px #CBCBCB, 0 6px 1px -2px #C9C9C9, 0 8px 1px -3px #BFBFBF, 0 10px 1px -4px #BBBBBB, 0 12px 1px -5px #BABABA, 0 14px 1px -6px #B9B9B9, 0 16px 1px -7px #AEAEAE, 0 18px 1px -8px #AAAAAA, 0 20px 1px -9px #A4A3A3, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 4px -6px rgba(0, 0, 0, 0.9), 0 45px 5px -5px rgba(0, 0, 0, 0.05), 0 35px 10px -5px rgba(0, 0, 0, 0.1), 0 25px 55px 5px rgba(0, 0, 0, 0.15), 0 0 3px white inset,0px 10px 15px rgba(255,255,255,0.3);
transition: all  900ms ease-in 550ms;
}
#wrap:hover li:nth-child(2n+1){
right : 350px;
left: auto;
transition: all  1100ms ease-in 450ms;
}

#wrap:hover li:first-child{left: 450px}
#wrap:hover li:last-child{right : 650px;left: auto;}
#wrap:hover li:nth-last-child(2){left : 250px;}
.small{
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.xsmall{
-webkit-transform: scale(0.25);
transform: scale(0.25);
}
.medium{
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.inverted{
-webkit-transform: scaleX(-1);
transform: scaleX(-1) ;
}

Comments