Instantly share code, notes, and snippets.

@gknasln /dabblet.css
Last active Oct 11, 2018

Embed
What would you like to do?
Untitled
import: url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
* {
box-sizing: border-box;
font-family: Roboto;
}
.container{
position: relative;
margin: 30px;
font-size: 25px;
display: flex;
align-items: center;
}
#company-title{
color: gray;
font-size: 0.7em;
cursor: pointer;
}
#company-title:hover{
color: rgb(100, 100, 100);
text-decoration: underline;
}
#company-informations{
position: absolute;
top: 110%;
left: 130px;
/*width: 250px;
height: 130px;*/
padding: 10px;
opacity: 0;
background: rgb(250, 250, 245);
border: 1px solid rgb(220, 220, 220);;
box-shadow: 2px 5px 25px 1px rgba(100, 110, 110, 0.2);
transition: opacity 0.4s;
font-size: 14px;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
margin: 10px 30px;
}
.lds-ripple div {
position: absolute;
border: 5px solid #000;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 28px;
left: 28px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: -1px;
left: -1px;
width: 58px;
height: 58px;
opacity: 0;
}
}
<div class="container">
<span>Gökhan Aslan — &nbsp</span>
<span id="company-title">Beymen</span>
</div>
document.getElementById('company-title').addEventListener('mouseover', function(){
if(!this.parentElement.querySelector('#company-informations')){
var card = document.createElement('DIV');
var cardAtt = document.createAttribute('id');
cardAtt.value = ('company-informations');
card.setAttributeNode(cardAtt);
card.innerHTML = '<div class="lds-ripple"><div></div><div></div></div>'
this.parentElement.appendChild(card);
setTimeout(function(){
document.getElementById('company-informations').style.opacity= '1';
}, 100);
setTimeout(function(){
card.innerHTML = '<span> Çalışan Sayısı : </span> ' +
' <span> 1326 </span> ' +
' <br/><br/> ' +
' <span> Şirket Türü :</span> ' +
' <span> Perakende </span> ' +
' <br/><br/> ' +
' <span> Yıllık Gelir : </span> ' +
' <span> 1.000,000 TL </span> ' ;
}, 3000);
}
});
document.getElementById('company-title').addEventListener('mouseout', function(){
const card = this.parentElement.querySelector('#company-informations');
card.style.opacity= '0';
setTimeout(function(){
card.parentElement.removeChild(card);
}, 400);
});
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment