Poison Ivy Relaciones

/*** RELACIONES SIMPLES, SIN CSS INCORPORADO ***/

<link href="https://dl.dropboxusercontent.com/s/trx442tr8ul2xzk/relaciones-poisonivy.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display:400,700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><div class="ivy"><div class="pivimg"></div><div class="pivimg1" style="background:url('https://i.imgur.com/TMKnpgM.png');"></div><h2>You know you can't resist me, no man can</h2><div class="ivy-relas"><div class="ivypj" style="background:url('https://i.imgur.com/RLkbEgF.png');"><span class="tooltip"><i class="sf sf-cannabis"></i>Catwoman</span></div><div class="ivypj" style="background:url('https://i.imgur.com/uLHBDen.png');"><span class="tooltip"><i class="sf sf-beaker"></i>Batman</span></div><div class="ivypj" style="background:url('https://i.imgur.com/tvVJpkh.png');"><span class="tooltip"><i class="sf sf-hearts"></i>Harley Quinn</span></div><div class="ivypj" style="background:url('https://i.imgur.com/vXAc11Y.png');"><span class="tooltip"><i class="sf sf-bolt"></i>Deadshot</span></div><div class="ivypj" style="background:url('https://i.imgur.com/cgh2fwt.png');"><span class="tooltip"><i class="sf sf-bolt"></i>D. Poison</span></div><div class="ivypj" style="background:url('https://i.imgur.com/MN04ypF.png');"><span class="tooltip"><i class="sf sf-bolt"></i>Enchantress</span></div></div><div class="ivyley"><i class="sf sf-cannabis"></i> Amigo <i class="sf sf-beaker"></i> Enemigo <i class="sf sf-hearts"></i> Romance <i class="sf sf-bolt"></i> Conocido</div></div><div class="ccpoiv"><a href="https://valanwhistle.tumblr.com/">vac</a></div>


/*** RELACIONES CON CSS INCORPORADO ***/


<link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display:400,700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><div class="ivy"><div class="pivimg"></div><div class="pivimg1" style="background:url('https://i.imgur.com/TMKnpgM.png');"></div><h2>You know you can't resist me, no man can</h2><div class="ivy-relas"><div class="ivypj" style="background:url('https://i.imgur.com/RLkbEgF.png');"><span class="tooltip"><i class="sf sf-cannabis"></i>Catwoman</span></div><div class="ivypj" style="background:url('https://i.imgur.com/uLHBDen.png');"><span class="tooltip"><i class="sf sf-beaker"></i>Batman</span></div><div class="ivypj" style="background:url('https://i.imgur.com/tvVJpkh.png');"><span class="tooltip"><i class="sf sf-hearts"></i>Harley Quinn</span></div><div class="ivypj" style="background:url('https://i.imgur.com/vXAc11Y.png');"><span class="tooltip"><i class="sf sf-bolt"></i>Deadshot</span></div><div class="ivypj" style="background:url('https://i.imgur.com/cgh2fwt.png');"><span class="tooltip"><i class="sf sf-bolt"></i>D. Poison</span></div><div class="ivypj" style="background:url('https://i.imgur.com/MN04ypF.png');"><span class="tooltip"><i class="sf sf-bolt"></i>Enchantress</span></div></div><div class="ivyley"><i class="sf sf-cannabis"></i> Amigo <i class="sf sf-beaker"></i> Enemigo <i class="sf sf-hearts"></i> Romance <i class="sf sf-bolt"></i> Conocido</div></div><div class="ccpoiv"><a href="https://valanwhistle.tumblr.com/">vac</a></div>

<style> .ivy {width:400px; height:auto; box-sizing: border-box; margin:0 auto; background:#222723; border:6px solid #636d18; padding:5px; padding-bottom:20px; -webkit-box-shadow: 2px -2px 40px -11px rgba(143,158,32,1); -moz-box-shadow: 2px -2px 40px -11px rgba(143,158,32,1); box-shadow: 2px -2px 40px -11px rgba(143,158,32,1);} .ivy h2 {font-family:'Playfair Display'; color:#93a86f; text-align:center; font-style:italic; font-size:11px; margin-top:-50px; transition:all 1s;} .ivy h2::before {content:'«'; margin-right:5px;} .ivy h2:hover {letter-spacing:3px; transition:all 1s;} .ivy h2::after {content:'»'; margin-left:5px;} .ivy-relas {width:350px; margin:0 auto; height:auto; overflow-x:auto; display:flex; flex-wrap:wrap;} .ivypj {width:100px; height:100px; background:url('https://placehold.it/100x100'); margin-top:10px; border:4px solid #636d18; margin-left:5px; position:relative;} .tooltip {display:none; position:absolute; background:#394723; color:#93a86f; font-family:'Lato'; text-transform:uppercase; font-size:7px; padding:5px 10px; line-height:10px; z-index:500; text-align:center; border-radius:5px; left:10px; bottom:90px; max-width:104px; border:2px solid #636d18;} .tooltip i{margin-right:2px;} .ivypj:hover .tooltip {display:inline-block;} .ivyley {width:320px; height:auto; padding:5px 10px; margin:0 auto; background:#636d18; color:#222; font-family:'Lato'; text-transform:uppercase; font-size:9px; text-align:center; margin-top:10px;} .ivyley i {margin:0 5px;} .pivimg, .pivimg1 {width:90px; height:90px; border-radius:100%;} .pivimg {background:#394723; border-left:4px solid #636d18; border-top:4px solid #394723; border-right:4px solid #636d18; border-bottom:4px solid #394723; position:relative; top:10px; left:130px; padding:5px; -webkit-animation: rotation 2s infinite linear;} .pivimg1 {background:url('https://placehold.it/90x90'); position:relative;top:-88px; left:140px;} @-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}} .ccpoiv {width:400px; margin:0 auto; text-align:right; font-size:8px; text-transform:uppercase;} </style>