PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
L

javascript transition

Door Louis Deconinck op 29-09-2013 19:26
1.781 views
Hallo iedereen,

als je naar de website http://luckynation.be gaat en hovert over de eerste foto van 'thomas' zie je dat de tooltip ook meeroteert, hoe kan ik er voor zorgen dat de tooltip pas zichtbaar wordt wanneer de rotatie is voltooid?

Hier is mijn code:

html.php:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
    <script src="http://jarallax.com/download/jarallax-0.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<script type="text/javascript">
jQuery('document').ready(function($){
	$('[title]').removeAttr('title');
});
</script>
<script type="text/javascript">
      init = function(){
        var jarallax = new Jarallax();

      }
    </script>
  </head>
  <body onload="init()">
<a name="top"></a>
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_BE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="header">
   <div id="logo">
    <img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
    <h1>Lucky Nation</h1>
   </div>
  </div>
  <div id="content">
<div id="pijlomhoog"><a href="#top"><img src="/images/pijlomhoog.png" height="256" width="256" /></a></div>
<div id="pijlomlaag"><a href="#products"><img src="/images/pijlomlaag.png" height="256" width="256" /></a></div>
   <div id="mtt">
    <h2 class="meettheteam"><img src="/images/mtt-logo.png" height="48" width="48" border="0" />Meet the team</h2>
<h2 class="functie">Gedelegeerd bestuurders</h2>
<div class="thomas"><a href="#" id="Ik ben Thomas :-)<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem rutrum, venenatis arcu eget, ultrices erat. Donec tellus mi, posuere consequat tincidunt eget, suscipit ut arcu. In euismod in ipsum gravida dignissim. Aenean sit amet sagittis leo. Nunc viverra sodales rutrum. Suspendisse ut felis consequat, elementum nibh et, ultrices lectus. Nulla a lectus mi. Fusce dignissim nisi non aliquam imperdiet. Donec in volutpat enim, sed molestie libero. Quisque placerat ante a bibendum fringilla. Donec eu augue et est molestie pulvinar nec sit amet orci. Etiam commodo sem vel consequat sollicitudin." class="tooltip"><h3 class="thomasnaam">Thomas</h3></a></div>
<div class="andreas"><a href="#" id="Ik ben Andreas :-)" class="tooltip"><h3 class="andreasnaam">Andreas</h3></a></div>
<h2 class="functie">Administratie</h2>
<div class="emiel"><a href="#" id="Ik ben Emiel :-)" class="tooltip"><h3 class="emielnaam">Emiel</h3></a></div>
<div class="jarik"><a href="#" id="Ik ben Jarik :-)" class="tooltip"><h3 class="jariknaam">Jarik</h3></a></div>
<h2 class="functie">Marketing</h2>
<div class="sien"><a href="#" id="Ik ben Sien :-)" class="tooltip"><h3 class="siennaam">Sien</h3></a></div>
<div class="ines"><a href="#" id="Ik ben Ines :-)" class="tooltip"><h3 class="inesnaam">Ines</h3></a></div>
<h2 class="functie">Kassa</h2>
<div class="aline"><a href="#" id="Ik ben Aline :-)" class="tooltip"><h3 class="alinenaam">Aline</h3></a></div>
<div class="nicolas"><a href="#" id="Ik ben Nicolas :-)" class="tooltip"><h3 class="nicolasnaam">Nicolas</h3></a></div>
<h2 class="functie">Boekhouding</h2>
<div class="ytse"><a href="#" id="Ik ben Ytse :-)" class="tooltip"><h3 class="ytsenaam">Ytse</h3></a></div>
<div class="brecht"><a href="#" id="Ik ben Brecht :-)" class="tooltip"><h3 class="brechtnaam">Brecht</h3></a></div>
<h2 class="functie">Techniek</h2>
<div class="louis"><a href="#" id="Ik ben Louis :-)" class="tooltip"><h3 class="louisnaam">Louis</h3></a></div>
<div class="thiemen"><a href="#" id="Ik ben Thiemen :-)" class="tooltip"><h3 class="thiemennaam">Thiemen</h3></a></div>
<h2 class="functie">Website</h2>
<div class="louis2"><a href="#" id="Ik ben Louis :-)" class="tooltip"><h3 class="louis2naam">Louis</h3></a></div>
<h2 class="functie">Onder leiding van</h2>
<div class="mvandamme"><a href="#" id="Ik bent M. Vandamme :-)" class="tooltip"><h3 class="mvandammenaam">M. Vandamme</h3></a></div>
<h2 class="meettheteam"><img src="/images/lu-logo.png" height="48" width="48" border="0" />Like us</h2>
<div class="fbbox"><div class="fb-like-box" data-href="https://www.facebook.com/LuckyNationn" data-width="500" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div></div>
<a name="products"><h2 class="meettheteam"><img src="/images/p-logo.png" height="48" width="48" border="0" />Products</h2></a>
<h2 class="meettheteam"><img src="/images/c-logo.png" height="48" width="48" border="0" />Contact</h2>
<div class="contact">Mail ons: info[at]luckynation[punt]be<br/>Bel ons: 0474 05 07 72<br/>Bezoek ons: Hulstplein 32, 8700 Tielt</div>
</div>
  </div>	
<div id="footer">&copy; 2013 Louis Deconinck</div>
 </body>
</html>


style.css:

/* GOOGLE WEBFONTS IMPORTEREN */

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);

/* HEADER */

#logo {
position: fixed;
}

#header {
background-color: #f39c12;
height: 70px;
}

#logo img {
float:left;
}

#logo {
margin: 0px 0px 0px 50px;
padding: 10px 0px 0px 0px;
}

#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 36px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}

/* CONTENT */

#content {
width: 800px;
margin: 0 auto;
}

/* MEET THE TEAM */

.meettheteam {
font-family: 'Pacifico', cursive;
color: #c0392b;
font-size: 54px;
}

.meettheteam img {
margin-right: 10px;
}

#mtt h3 {
font-family: 'Indie Flower', cursive;
}

.functie {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
}

.thomas, .emiel, .sien, .aline, .ytse, .louis {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 200px;
}

.andreas, .jarik, .ines, .nicolas, .brecht, .thiemen  {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: -194px 0px 0px 450px;
}

.louis2, .mvandamme {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 325px;
}

.thomas {
background: url(/images/thomas-profiel.png) no-repeat;
}

.andreas {
background: url(/images/andreas-profiel.png) no-repeat;
}

.emiel {
background: url(/images/emiel-profiel.png) no-repeat;
}

.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}

.sien {
background: url(/images/sien-profiel.png) no-repeat;
}

.ines {
background: url(/images/ines-profiel.png) no-repeat;
}

.aline {
background: url(/images/aline-profiel.png) no-repeat;
}

.nicolas {
background: url(/images/nicolas-profiel.png) no-repeat;
}

.jarik {
background: url(/images/jarik-profiel.png) no-repeat;
}

.ytse {
background: url(/images/ytse-profiel.png) no-repeat;
}

.brecht {
background: url(/images/brecht-profiel.png) no-repeat;
}

.louis, .louis2 {
background: url(/images/louis-profiel.png) no-repeat;
}

.thiemen {
background: url(/images/thiemen-profiel.png) no-repeat;
}

.mvandamme {
background: url(/images/martien-profiel.png) no-repeat;
}

.thomasnaam, .andreasnaam, .emielnaam, .jariknaam, .siennaam, .inesnaam, .nicolasnaam, .alinenaam, .ytsenaam, .brechtnaam, .thiemennaam, .louisnaam, .louis2naam, .mvandammenaam {
text-align: center;
padding-top: 150px;
}

.thomas, .emiel, .sien, .aline, .ytse, .louis, .andreas, .jarik, .ines, .nicolas, .brecht, .thiemen, .louis2, .mvandamme {
moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, color 2s, transform 2s;
}

.thomas:hover, .andreas:hover, .emiel:hover, .jarik:hover, .sien:hover, .ines:hover, .nicolas:hover, .aline:hover, .ytse:hover, .brecht:hover, .thiemen:hover, .louis:hover, .louis2:hover, .mvandamme:hover {
opacity: 1;
width:180px;
height:180px;
background-color: #c0392b;
color: #fff;
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

.fbbox {
text-align: center;
}

.contact {
font-family: 'Indie Flower', cursive;
font-size: 25px;
}

#pijlomhoog {
opacity: 0.5;
position: fixed;
margin-top: 100px;
margin-left: 750px;
width: 256px;
height: 256px;
}

#pijlomlaag {
opacity: 0.5;
position: fixed;
margin-top: 356px;
margin-left: 750px;
width: 256px;
height: 256px;
}

#pijlomhoog:hover, #pijlomlaag:hover {
opacity: 1;
}

#footer {
background-color: #f39c12;
height: 35px;
margin-top: 50px;
padding-top: 2px;
padding-left: 10px;
margin-bottom: 15px;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 24px;
}

.tooltip {
display: inline;
position: relative;
text-decoration: none;
color: #000000;
moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition: transform 2s step-end;
}
		
.thomas .tooltip:hover:after {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(id);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
margin-left: -420px;
}

.andreas .tooltip:hover:after {
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(id);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
margin-left: -670px;
}
Kris Peeters
30-09-2013 12:02
Dat is leuk gedaan.

Ik zou wel wat dingen veranderen.
Je gebruikt dingen niet waarvoor ze dienen.

Vooral dan id en class; die moet je beter gebruiken.
Als het uniek is, gebruik dan id.
Als het een eigenschap is die meerdere elementen verbindt, gebruik dan class.

Maak ook beter gebruik van overerving.

bv. bij mij zou thomas er zo uit zien:

<div id="thomas" class="team">
  <a href="#" class="tooltip" data-tooltip="Ik ben Thomas :-)&lt;br/&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed lorem rutrum, venenatis arcu eget, ultrices erat. Donec tellus mi, posuere consequat tincidunt eget, suscipit ut arcu. In euismod in ipsum gravida dignissim. Aenean sit amet sagittis leo. Nunc viverra sodales rutrum. Suspendisse ut felis consequat, elementum nibh et, ultrices lectus. Nulla a lectus mi. Fusce dignissim nisi non aliquam imperdiet. Donec in volutpat enim, sed molestie libero. Quisque placerat ante a bibendum fringilla. Donec eu augue et est molestie pulvinar nec sit amet orci. Etiam commodo sem vel consequat sollicitudin.">
    <h3>Thomas</h3>
  </a>
</div>


Zo kan je al je teamleden in 1 keer aanspreken met .team (in plaats van bv. '.thomas, .emiel, .sien, .aline, .ytse, .louis, .andreas, .jarik, ...')

bv. die <h3> wordt dan .team h3

Let er ook op: ik zet die tooltip data in data-tooltip . Met deze data- constructie kan je op een veilige manier gelijk welke data plakken aan een HTML element, zonder dat dat stoort.
Met jQuery kan je die dan opvragen met
$(this).data('tooltip').

----

Ik zal je een voorbeeld schrijven van hoe dit op een betere manier kan.
L Louis Deconinck
30-09-2013 19:36
Heel erg bedankt voor de hulp, ik heb de nodige aanpassingen vericht, maar nu loopt alles nog meer door het honderd, op http://luckynation.be kan je zien wat.

De issues:
Algemeen
- Emiel en Nicolas zijn verdwenen + Jarik staat over Andreas
- Bij transition verandert de background-color niet
- De tooltip verschijnt niet bij hover

Browsergerelateerd:
- In IE10 werken de transitions niet
- In IE + FireFox toont de fbbox geen gezichtjes

index.php:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <!-- LINKEN NAAR STYLESHEET -->

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

 <!-- JQUERY IMPORTEREN -->

 <script src="http://jarallax.com/jquery-1.7.1.min.js"></script>
  
  <!-- MOOIER SCROLLEN MET PIJLENNAVIGATIE -->

  <script type="text/javascript">
   $(function() {
    $('a[href*=#]:not([href=#])').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
       $('html,body').animate({
        scrollTop: target.offset().top
       }, 1000);
       return false;
      }
     }
    });
   });
  </script>
 </head>
 
 <!-- BEGIN BODY -->
 
 <body>
  
  <!-- TOPANKER VOOR PIJLENNAVIGATIE -->
 
  <a name="top"></a>
  <br/>

   <!-- BEGIN HEADER -->

   <div id="header">
    <div id="logo">
     <img src="/images/logo-luckynation.png" height="48" width="48" border="0" />
     <h1>Lucky Nation</h1>
    </div>
   </div>

   <!-- BEGIN CONTENT -->

   <div id="content">

    <!-- PIJLENNAVIGATIE -->

    <div id="pijlomhoog"><a href="#top"><img src="/images/pijlomhoog.png" height="256" width="256" /></a></div>
    <div id="pijlomlaag"><a href="#products"><img src="/images/pijlomlaag.png" height="256" width="256" /></a></div>
     <div id="mtt">

      <!-- TEAMMEMBERS -->

      <h2 class="meettheteam"><img src="/images/mtt-logo.png" height="48" width="48" border="0" />Meet the team</h2>
      <h2 class="functie">Gedelegeerd bestuurders</h2>
      <div id="thomas" class="teaml"><a href="#" data-tooltip="Ik ben Thomas :-)&lt;br/&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit." class="tooltip"><h3>Thomas</h3></a></div>
      <div id="andreas" class="teamr"><a href="#" data-tooltip="Ik ben Andreas :-)" class="tooltip"><h3>Andreas</h3></a></div>
      <h2 class="functie">Administratie</h2>
      <div id="emiel class="teaml"><a href="#" data-tooltip="tooltip" class="tooltip"><h3>Emiel</h3></a></div>
      <div id="jarik" class="teamr"><a href="#" data-tooltip="tooltip" class="tooltip"><h3>Jarik</h3></a></div>
      <h2 class="functie">Marketing</h2>
      <div id="sien" class="teaml"><a href="#" data-tooltip="Ik ben Sien :-)" class="tooltip"><h3>Sien</h3></a></div>
      <div id="ines" class="teamr"><a href="#" data-tooltip="Ik ben Ines :-)" class="tooltip"><h3>Ines</h3></a></div>
      <h2 class="functie">Kassa</h2>
      <div id="aline" class="teaml"><a href="#" data-tooltip="Ik ben Aline :-)" class="tooltip"><h3>Aline</h3></a></div>
      <div id="nicolas" class="teamr"><a href="#" data-tooltip="Ik ben Nicolas :-)" class="tooltip"><h3>Nicolas</h3></a></div>
      <h2 class="functie">Boekhouding</h2>
      <div id="ytse" class="teaml"><a href="#" data-tooltip="Ik ben Ytse :-)" class="tooltip"><h3>Ytse</h3></a></div>
      <div id="brecht" class="teamr"><a href="#" data-tooltip="Ik ben Brecht :-)" class="tooltip"><h3>Brecht</h3></a></div>
      <h2 class="functie">Techniek</h2>
      <div id="louis" class="teaml"><a href="#" data-tooltip="Ik ben Louis :-)" class="tooltip"><h3>Louis</h3></a></div>
      <div id="thiemen" class="teamr"><a href="#" data-tooltip="hallo" class="tooltip"><h3>Thiemen</h3></a></div>
      <h2 class="functie">Website</h2>
      <div id="louis2" class="teamm"><a href="#" data-tooltip="Ik ben Louis :-)" class="tooltip"><h3>Louis</h3></a></div>
      <h2 class="functie">Onder leiding van</h2>
      <div id="mvandamme class="teamm"><a href="#" data-tooltip="Ik bent M. Vandamme :-)" class="tooltip"><h3>M. Vandamme</h3></a></div>

      <!-- FB LIKEBOX -->

      <h2 class="meettheteam"><img src="/images/lu-logo.png" height="48" width="48" border="0" />Like us</h2>
      <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fluckynationn&amp;width=600&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:258px;" allowTransparency="true"></iframe>
      
      <!-- PRODUCTS -->

      <a name="products"><h2 class="meettheteam"><img src="/images/p-logo.png" height="48" width="48" border="0" />Products</h2></a>

      <!-- CONTACT -->

      <h2 class="meettheteam"><img src="/images/c-logo.png" height="48" width="48" border="0" />Contact</h2>
      <div class="contact">Mail ons: info[at]luckynation[punt]be<br/>Bel ons: 0474 05 07 72<br/>Bezoek ons: Hulstplein 32, 8700 Tielt</div>
     </div>
   </div>	

    <!-- FOOTER -->

    <div id="footer">&copy; 2013 Louis Deconinck</div>
 </body>
</html>


style.css:

/* GOOGLE WEBFONTS IMPORTEREN */

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);

/* HEADER */

a img {
border:none;
}

#logo {
position: fixed;
}

#header {
background-color: #f39c12;
height: 70px;
}

/* LOGO */

#logo img {
float:left;
}

#logo {
margin: 0px 0px 0px 50px;
padding: 10px 0px 0px 0px;
}

#logo h1 {
width: 220px;
background-color: #c0392b;
border-radius: 25px 25px 25px 25px;;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 36px;
margin: 0px 0px 0px 55px;
padding: 0px 0px 5px 25px;
}

/* CONTENT */

#content {
width: 800px;
margin: 0 auto;
}

/* MEET THE TEAM */

.meettheteam {
font-family: 'Pacifico', cursive;
color: #c0392b;
font-size: 54px;
}

.meettheteam img {
margin-right: 10px;
}

#mtt h3 {
font-family: 'Indie Flower', cursive;
}

/* FUNCTIE TITEL */

.functie {
text-align: center;
font-family: 'Indie Flower', cursive;
font-size: 25px;
}

/* PROFIELFOTO OPMAAK */

.teaml, .teamr, .teamm {
border-radius: 75px;
opacity: 0.5;
height: 175px;
width: 150px;
display: block;
margin: 0px 0px 0px 200px;
}

.teaml {margin: 0px 0px 0px 200px;}.teamr {margin: -194px 0px 0px 450px;}.teamm {margin: 0px 0px 0px 325px;}

/* PROFIELFOTOS */

#thomas {background: url(/images/thomas-profiel.png) no-repeat;}#andreas {background: url(/images/andreas-profiel.png) no-repeat;}#emiel {background: url(/images/emiel-profiel.png) no-repeat;}#jarik {background: url(/images/jarik-profiel.png) no-repeat;}#sien {background: url(/images/sien-profiel.png) no-repeat;}#ines {background: url(/images/ines-profiel.png) no-repeat;}#aline {background: url(/images/aline-profiel.png) no-repeat;}.nicolas {background: url(/images/nicolas-profiel.png) no-repeat;}#jarik {background: url(/images/jarik-profiel.png) no-repeat;}#ytse {background: url(/images/ytse-profiel.png) no-repeat;}#brecht {background: url(/images/brecht-profiel.png) no-repeat;}#louis, #louis2 {background: url(/images/louis-profiel.png) no-repeat;}#thiemen {background: url(/images/thiemen-profiel.png) no-repeat;}#mvandamme {background: url(/images/martien-profiel.png) no-repeat;}

/* PLAATS NAAM */

.teaml h3, .teamr h3, .teamm h3 {
text-align: center;
padding-top: 150px;
}

/* PROFIELFOTO TRANSITIONS */

.teaml, .teamr, .teamm {
-moz-transition:width 2s, height 2s, background-color 2s, color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, color 2s, transform 2s;
}

.teaml:hover, .teamr:hover, .teamm:hover {
opacity: 1;
width:180px;
height:180px;
background-color: #f39c12;
color: #ffffff;
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

/* FACEBOOKBOX */

.fbbox {
text-align: center;
}

/* CONTACT */

.contact {
font-family: 'Indie Flower', cursive;
font-size: 25px;
}

/* PIJLENNAVIGATIE */

#pijlomhoog {
opacity: 0.5;
position: fixed;
margin-top: 100px;
margin-left: 750px;
width: 256px;
height: 256px;
}

#pijlomlaag {
opacity: 0.5;
position: fixed;
margin-top: 356px;
margin-left: 750px;
width: 256px;
height: 256px;
}

#pijlomhoog:hover, #pijlomlaag:hover {
opacity: 1;
}

/* FOOTER */

#footer {
background-color: #f39c12;
height: 35px;
margin-top: 50px;
padding-top: 2px;
padding-left: 10px;
margin-bottom: 15px;
font-family: 'Lobster', cursive;
color: #ffffff;
font-size: 24px;
}

/* TOOLTIP */

.tooltip {
display: inline;
position: relative;
text-decoration: none;
color: #000000;
opacity: 0;
}

/* TOOLTIP HOVER */

.teaml .tooltip:hover:after, .teamr .tooltip:hover:after, .teamm .tooltip:hover:after {
opacity: 1;
background: #c0392b;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 0%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}

/* PLAATS TOOLTIP */

.teaml .tooltip:hover:after {margin-left: -420px;}.teamr .tooltip:hover:after {margin-left: -670px;}.teamm .tooltip:hover:after {margin-left: -545px;}


Jullie hulp betekent zeer veel voor mij, dus alle hulp is welkom :-)

Alvast bedankt
Louis

Reageren

Inloggen om te reageren