diff --git a/www/css/style.css b/www/css/style.css index 32a1296..ece57f0 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -345,6 +345,65 @@ section p.stand-out { } } +/*--------------------------------------------------------*/ +/* POPUP +/*--------------------------------------------------------*/ + +/* Popup container */ +.popup-trigger { + position: relative; + display: inline-block; + cursor: pointer; + text-decoration: dotted underline; + } + + + /* The actual popup (appears on top) */ +.popup-trigger .popup { + visibility: hidden; + min-width: 180px; + max-width: 350%; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -80px; + } + + /* Popup arrow */ +.popup-trigger .popup::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; + } + + /* Toggle this class when clicking on the popup container (hide and show the popup) */ + .popup-trigger .show { + visibility: visible; + -webkit-animation: fadeIn 1s; + animation: fadeIn 1s + } + + /* Add animation (fade in the popup) */ + @-webkit-keyframes fadeIn { + from {opacity: 0;} + to {opacity: 1;} + } + + @keyframes fadeIn { + from {opacity: 0;} + to {opacity:1 ;} + } /*--------------------------------------------------------*/ /* POULPE diff --git a/www/index.html b/www/index.html index a64da69..73cd22e 100644 --- a/www/index.html +++ b/www/index.html @@ -438,7 +438,12 @@ 26/11/2023 4:00 Petit Pôt - Une exposition comprenant des mosaïques de Lego, des photos, et des tableaux dichroïques. + Une triple exposition comprenant :
+ - des mosaïques de Lego
+ -
+ - des tableaux dichroïques.
@@ -605,7 +610,7 @@ - + @@ -621,6 +626,9 @@ endDate: new Date(2023, 10, 26, 5), groupEventsByLocation: true }); + $('.popup-trigger').click(function(){ + $(this).children($('.popup')).toggleClass("show") + }); });