• Less Preview

    Editeur Less (variables dans CSS)

    http://lesscss.org/less-preview/

  • Reset mot de passe administrateur drupal 8

    Script super, si votre site ne permet pas de redéfinir par courrier email votre mot de pass.

    https://drupal-addict.com/recuperer-le-mot-de-passe-admin-d-un-site-drupal

    Copiez ce script dans un fichier '.php' déposez le à la racine du site et lancez le avec la command suivante :

    fichier.php?pass=newpwd

    'newpwd' à remplacer par votre nouveau mot de pass.

     

    <?php

    use Drupal\Core\DrupalKernel;
    use Symfony\Component\HttpFoundation\Request;

    if (pathinfo(__FILE__, PATHINFO_FILENAME) == 'admin-pass-reset') {
      die('Please change your file name to a random string to continue');
    }

    // Boot Drupal.
    $autoloader = require __DIR__ . '/autoload.php';

    $request = Request::createFromGlobals();
    $kernel = DrupalKernel::createFromRequest($request, $autoloader, 'prod', FALSE);
    $kernel->boot();

    // Get password hasher service.
    $password_hasher = $kernel->getContainer()->get('password');

    // Hash password.
    if (isset($_GET['pass']) && !empty($_GET['pass'])) {
     $newhash =  $password_hasher->hash($_GET['pass']);
    }
    else {
      die('Retry with ?pass=PASSWORD set in the URL');
    }

    // Update user password.
    $updatepass = Drupal::database()->update('users_field_data')
      ->fields(array(
        'pass' => $newhash,
    //  'name' => 'admin',
    //    'mail' => 'yourmail@example.com'
      ))
      ->condition('uid', '1', '=')
      ->execute();

    // Clean user 1 cache.
    Drupal::cache()->delete('values:user:1');

    print "Done. Please delete this file as soon as possible";  

    ?>

  • near "ON" at position 25

    Solution 1 :

    Changing php.ini at C:\xampp\php\php.ini

    max_execution_time = 600
    max_input_time = 600
    memory_limit = 1024M
    post_max_size = 1024M

    Changing my.ini at C:\xampp\mysql\bin\my.ini

    max_allowed_packet = 1024M
    innodb_log_file_size = 20M
    innodb_log_buffer_size = 30M

    Divers solutions :

    https://www.ostraining.com/support-forum/drupal-support/unable-to-import-database/

  • Configuration serveur local php mysql

    Pour augmenter la taille d'importation de la DB dans phpmyadmin :

    ouvrir php.ini et mettre des valeur élevée pour :

    post_max_size:100M
    upload_max_filesize:100M

    Pour contourner la problème du port 80 déjà utilisé :

    configurer le port en 8080

  • Techniques de HOVER

    https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

    View :
    *****
    Les champs qui sont à "exclure de l'affichage" avec du code pour changer leurs apparences:
    <img src="/themes/icone_voir_taxo.png" alt="Icone voir taxo"/>

    Champ qui fera conteneur dans les paramètres "RÉÉCRIRE LES RÉSULTATS" :
    ----------------------------------------------------------------------

    <div class="viewhover view-affiche">  {{ field_image }} 
          <div class="mask">  
                 <div class="info">{{ field_information }}</div>      
                 <div class="voir_article">{{ view_node }}</div>        
                 <div class="edit_article">{{ edit_node }}</div>
                 <div class="voir_terme">{{ nothing }}
                          <div class="liste_terme">{{ term_node_tid }}  </div> 
                                   </div>      
                          </div>
                 <div class="image">{{ field_image_1 }}
          </div>    
    </div>

    ---------------------------------------------------------
    <style type="text/css">

    /* *************************
    **    View : survol images **
    ************************** */

    /* La zone de la vue DEHORS */
    .viewhover {
        float: left;
        overflow: hidden;
        position: relative;
        text-align: center;
        box-shadow: 1px 1px 2px #e6e6e6;
        cursor: default;
        background-color: #fff;
        border-style: solid;
        border-color:white;
        border-radius: 1em;
    }

    /* La zone de la vue DESSUS */
    .viewhover:hover {
        border-color:#178acc;
    }

    /* La zone MASK Paragraphe DEHORS  */
    .viewhover .mask p {
        height:4em;
    }

    /* La zone MASK DEHORS */
    .viewhover .mask {
        position: absolute;
        overflow: hidden;  
        padding:0.3em;
        z-index:1000;
        left: 0;
        top: 0; 
    }

    /* La zone MASK VOIR TERME / LISTE TERME DEHORS */
    .viewhover .mask .voir_terme .liste_terme {
        float: right;
        display: none; 
        margin:0.5em 0.5em 0em 0em;
        padding:0em 0.5em 0em 0em;
        text-align: right;
        background-color: #fff; 
    }

    /* La zone MASK VOIR TERME / LISTE TERME DESSUS */
    .viewhover .mask .voir_terme:hover .liste_terme {
        display: block; 
    }

    /* La zone MASK VOIR TERME / LISTE TERME LIENS DEHORS */
    .viewhover .mask .voir_terme .liste_terme a {
        padding:0.3em;
        list-style: none;
    }

    .viewhover .mask .voir_terme .liste_terme li {
        list-style: none;
    }

    /* La zone IMAGE DEHORS */
    .viewhover .image {
        position: absolute;
        overflow: hidden;  
        padding:0.3em;
        z-index:500;
        left: 0;
        bottom:-5em; 
        margin-left:10%;
        width: 80%;
    }

    /* La zone IMAGE IMG DEHORS */
    .viewhover .image IMG {
    }

    /* La zone IMG DEHORS & LISTE TERME */
    .viewhover img,  .liste_terme  {
        border-radius: 1em;
        box-shadow: 0 0 6px 0px #178acc;
    }

    /* La zone MASK IMG DEHORS */
    .viewhover .mask img {
        float: left;
        position: relative;
        margin-left:5%;
        border-radius: 1em;
        width: 27%;
    }

    /* La zone MASK IMG DESSUS & MASK2 IMG DESSUS*/
    .viewhover .mask img:hover, .viewhover .image img:hover {
        border: 0.2em solid #0e65d0;
    }

    /* La configuration 1 ---> AFFICHE 
    ************************************ */

    /* La configuration 1 IMAGE DEHORS */
    .view-affiche img { 
        opacity: 1;
    }

    /* La configuration 1 IMAGE DESSUS */
    .view-affiche:hover img { 
        opacity: 0;

    /* La configuration 1 MASK DEHORS */
    .view-affiche .mask {
        opacity: 0;
        transition: all 0.2s linear;
    }

    /* La configuration 1 IMAGE DEHORS */
    .view-affiche .image{
        opacity: 0;
        transition: all 0.2s linear;
    }

    /* La configuration 1 MASK DESSUS & 1 IMAGE  DESSUS */
    .view-affiche:hover .mask, .view-affiche:hover .image{ 
        opacity: 1;
        transition: all 0.4s ease-in-out;
    }

    /* La configuration 1 MASK IMG DESSUS & 1 IMAGE IMG DESSUS */
    .view-affiche:hover .mask img, .view-affiche:hover .image img  { 
        opacity: 1;
        transition: all 0.4s ease-in-out;

    /* La configuration 1 MASK IMG DESSUS */
    .view-affiche .mask img:hover  { 
        transform: scale(1.3);
    }

    /* La configuration 1 IMAGE DESSUS */
    .view-affiche .image:hover  { 
        transform: scale(1.1);
    }

    /* ****************************
    **    View : survol images test **
    ***************************** */

    /* La zone de la vue DEHORS */
    .viewikino {
        float: left;
        overflow: hidden;
        position: relative;
    }

    /* La zone de la vue DESSUS */
    .viewikino:hover {

    }

    /* La configuration 1 ---> TEST
    ************************************ */

    /* La configuration 1 IMG DEHORS */
    .view-ikino img { 
        opacity: 1;
    }

    /* La configuration 1 IMG DESSUS */
    .view-ikino:hover img { 
        opacity: 0;

    /* La configuration 1 MASK DEHORS */
    .view-test .mask {
        opacity: 0;
        transition: all 0.2s linear;
    }

    /* La configuration 1 MASK DESSUS */
    .view-test .mask:hover  { 
        opacity: 0;
    }

    </style>


    ---------------------------------------------


    *****************suite ********************************

    .view-second img {     
        transition: all 0.2s ease-in;
    }
    .view-second .mask { 
        background-color: rgba(115,146,184, 0.7); 
        width: 300px;
        padding: 60px;
        height: 300px;
        opacity: 0;
        transform: translate(265px, 145px) rotate(45deg);
        transition: all 0.2s ease-in-out;
    }
    .view-second h2 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: translate(200px, -200px);
        transition: all 0.2s ease-in-out;
    }
    .view-second p { 
        transform: translate(-200px, 200px);
        transition: all 0.2s ease-in-out;
    }
    .view-second a.info { 
        transform: translate(0px, 100px);
        transition: all 0.2s 0.1s ease-in-out;

    .view-second:hover .mask { 
        opacity:1; 
        transform: translate(-80px, -125px) rotate(45deg);
    }                              
    .view-second:hover h2 { 
        transform: translate(0px,0px);
        transition-delay: 0.3s; 
    }
    .view-second:hover p { 
        transform: translate(0px,0px); 
        transition-delay: 0.4s;
    }
    .view-second:hover a.info { 
        transform: translate(0px,0px); 
        transition-delay: 0.5s;
    }

    .view-third img {     
        transition: all 0.2s ease-in; 
    }
    .view-third .mask { 
        background-color: rgba(0,0,0,0.6);
        opacity: 0;
        transform: translate(460px, -100px) rotate(180deg);
        transition: all 0.2s 0.4s ease-in-out;
    }
    .view-third h2{
        transform: translateY(-100px);
        transition: all 0.2s ease-in-out;
    }
    .view-third p { 
        transform: translateX(300px) rotate(90deg);
        transition: all 0.2s ease-in-out;
    }
    .view-third a.info { 
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out;

    .view-third:hover .mask { 
        opacity:1; 
        transition-delay: 0s;                             
        transform: translate(0px, 0px);
    }
    .view-third:hover h2 { 
        transform: translateY(0px); 
        transition-delay: 0.5s; 
    }
    .view-third:hover p    { 
        transform: translateX(0px) rotate(0deg);
        transition-delay: 0.4s;
    }
    .view-third:hover a.info { 
        transform: translateY(0px);
        transition-delay: 0.3s;
    }

    .view-fourth img { 
        transition: all 0.4s ease-in-out 0.2s;
        opacity: 1;
    }
    .view-fourth .mask { 
        background-color: rgba(0,0,0,0.8);
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        transition: all 0.4s ease-in;
        border-radius: 0px;
    }
    .view-fourth h2{
        opacity: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transition: all 0.5s ease-in-out;
    }
    .view-fourth p { 
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }
    .view-fourth a.info { 
        opacity: 0;
        transition: all 0.5s ease-in-out;

    .view-fourth:hover .mask { 
        opacity: 1; 
        transform: scale(1) rotate(0deg);
        transition-delay: 0.2s;
    }                                  
    .view-fourth:hover img       { 
        transform: scale(0); 
        opacity: 0;
        transition-delay: 0s;
    }                        
    .view-fourth:hover h2,
    .view-fourth:hover p,
    .view-fourth:hover a.info{
        opacity: 1;
        transition-delay: 0.5s;
    }

    .view-fifth img {
        transition: all 0.3s ease-in-out; 
    }
    .view-fifth .mask { 
        background-color: rgba(146,96,91,0.3);
        transform: translateX(-300px);
        opacity: 1;
        transition: all 0.4s ease-in-out; 
    }
    .view-fifth h2{
        background: rgba(255, 255, 255, 0.5);
        color: #000;
        box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
    }
    .view-fifth p{
        opacity: 0;
        color: #333;
        transition: all 0.2s linear;
    }
    .view-fifth:hover .mask { 
        transform: translateX(0px);
    }                        
    .view-fifth:hover img { 
        transform: translateX(300px);
        transition-delay: 0.1s;
    }
    .view-fifth:hover p{
        opacity: 1;
        transition-delay: 0.4s;
    }
    .view-sixth img { 
        transition: all 0.4s ease-in-out 0.5s; 
    }
    .view-sixth .mask{ 
        background-color: rgba(146,96,91,0.5);
        opacity:0;
        transition: all 0.3s ease-in 0.4s;
    }
    .view-sixth h2{
        opacity:0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: scale(10);
        transition: all 0.3s ease-in-out 0.1s;
    }
    .view-sixth p { 
        opacity:0;
        transform: scale(10);
        transition: all 0.3s ease-in-out 0.2s;
    }
    .view-sixth a.info { 
        opacity:0;
        transform: translateY(100px);
        transition: all 0.3s ease-in-out 0.1s;
    }

    .view-sixth:hover .mask {  
        opacity:1; 
        transition-delay: 0s;
    }                                                                             
    .view-sixth:hover img { 
        transition-delay: 0s; 
    }
    .view-sixth:hover h2 { 
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.1s;
    }
    .view-sixth:hover p { 
        opacity:1; 
        transform: scale(1);
        transition-delay: 0.2s;
    }
    .view-sixth:hover a.info { 
        opacity:1;
        transform: translateY(0px);
        transition-delay: 0.3s;
    }
    .view-seventh img{
        transition: all 0.5s ease-out;
        opacity: 1;
    }
    .view-seventh .mask { 
        background-color: rgba(77,44,35,0.5);
        transform: rotate(0deg) scale(1);
        opacity: 0;
        transition: all 0.3s ease-out;
        transform: translateY(-200px) rotate(180deg);
    }
    .view-seventh h2{
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out;
    }
    .view-seventh p { 
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out;
    }
    .view-seventh a.info { 
        transform: translateY(-200px);
        transition:  all 0.2s ease-in-out;

    .view-seventh:hover img{
        transform: rotate(720deg) scale(0);
        opacity: 0;
    }
    .view-seventh:hover .mask { 
        opacity: 1;  
        transform: translateY(0px) rotate(0deg);
        transition-delay: 0.4s;
    }                                                                                        
    .view-seventh:hover h2 { 
        transform: translateY(0px);
        transition-delay: 0.7s;
    }
    .view-seventh:hover p { 
        transform: translateY(0px);
        transition-delay: 0.6s;
    }
    .view-seventh:hover a.info { 
        transform: translateY(0px);
        transition-delay: 0.5s;
    }
    .view-eighth .mask { 
        background-color: rgba(255, 255, 255, 0.7);
        top: -200px;
        opacity: 0;
        transition: all 0.3s ease-out 0.5s;
    }
    .view-eighth h2{
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out 0.1s;
    }
    .view-eighth p { 
        color: #333;
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out 0.2s;
    }
    .view-eighth a.info { 
        transform: translateY(-200px);
        transition:  all 0.2s ease-in-out 0.3s;

    .view-eighth:hover .mask { 
        opacity: 1; 
        top: 0px; 
        transition-delay: 0s; 
        animation: bounceY 0.9s linear;
    }                                                                                        
    .view-eighth:hover h2 { 
        transform: translateY(0px);
        transition-delay: 0.4s;
    }
    .view-eighth:hover p { 
        transform: translateY(0px);
        transition-delay: 0.2s;
    }
    .view-eighth:hover a.info { 
        transform: translateY(0px);
        transition-delay: 0s;
    }
    .view-ninth .mask-1,
    .view-ninth .mask-2{
        background-color: rgba(0,0,0,0.5);
        height: 361px;
        width: 361px;
        background: rgba(119,0,36,0.5);
        opacity: 1;
        transition: all 0.3s ease-in-out 0.6s;
    }
    .view-ninth .mask-1 { 
        left: auto;
        right: 0px;
        transform: rotate(56.5deg) translateX(-180px);
        transform-origin: 100% 0%;
    }
    .view-ninth .mask-2 { 
        top: auto;
        bottom: 0px;
        transform: rotate(56.5deg) translateX(180px);
        transform-origin: 0% 100%;
    }
    .view-ninth .content{
        background: rgba(0,0,0,0.9);
        height: 0px;
        opacity: 0.5;
        width: 361px;
        overflow: hidden;
        transform: rotate(-33.5deg) translate(-112px,166px);
        transform-origin: 0% 100%;
        transition: all 0.4s ease-in-out 0.3s;
    }
    .view-ninth h2{
        background: transparent;
        margin-top: 5px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .view-ninth a.info{
        display: none;
    }

    .view-ninth:hover .content{
        height: 120px;
        width: 300px;
        opacity: 0.9;
        top: 40px;
        transform: rotate(0deg) translate(0px,0px);
    }
    .view-ninth:hover .mask-1,
    .view-ninth:hover .mask-2{
        transition-delay: 0s;
    }
    .view-ninth:hover .mask-1{
        transform: rotate(56.5deg) translateX(1px);
    }
    .view-ninth:hover .mask-2 {  
        transform: rotate(56.5deg) translateX(-1px);
    }

    .view-tenth img { 
        transform: scaleY(1);
        transition: all 0.7s ease-in-out;
    }
    .view-tenth .mask { 
        background-color: rgba(255, 231, 179, 0.3); 
        transition: all 0.5s linear;
        opacity: 0;
    }    
    .view-tenth h2{
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: scale(0);
        color: #333;
        transition: all 0.5s linear;
        opacity: 0;
    }
    .view-tenth p {
        color: #333;
        opacity: 0;
        transform: scale(0);
        transition: all 0.5s linear;
    }
    .view-tenth a.info { 
        opacity: 0;
        transform: scale(0);
        transition: all 0.5s linear;
    }

    .view-tenth:hover img { 
        transform: scale(10);
        opacity: 0;
    }
    .view-tenth:hover .mask { 
        opacity: 1;
    }                                                                             
    .view-tenth:hover h2,
    .view-tenth:hover p,
    .view-tenth:hover a.info{ 
        transform: scale(1);
        opacity: 1;
    }
    </style>


    iciiiiiiiiiiiiiiiiii


    <style type="text/css">

    .viewhover {
        float: left;
        overflow: hidden;
        position: relative;
        text-align: center;
        cursor: default;
        background: #fff url('sites/ikino/files/bandeau-ikino.jpg') no-repeat center center;
        background-size: contain;
        border-radius: 1em;
    }

    .viewhover p {
        font-family: Arial, serif;
        font-style: italic;
        position: relative;
        color: #033c73;
        text-align: center;
        font-size: larger;
        max-height: 3em;
    }

    .viewhover p a {
        font-style: bold;
        color: #033c73;
    }

    /* toute la zone MASK 
    ********************* */
    .viewhover .mask  {
        position: absolute;
        overflow: hidden;  
        padding:1em;
        width: 100%;
        height: 50%;
        left: 0;
        top: 0; 
    }

    .viewhover .mask2  {
        position: absolute;
        overflow: hidden;
        padding:1em;
        width: 100%;
        height: 50%;
        left: 0;
        bottom: 0; 
    }

    /* le champ info
    **************** */
    .viewhover .mask .info {
        display: inline-block;
        text-decoration: none;
    }


    /* toute les images 
    ******************* */
    .viewhover img {
        border-radius: 1em;
        box-shadow: 0 0 6px 0px #178acc;
    }

    .viewhover .mask img {
        float: left;
        position: relative;
        margin:0.5em;
        border-radius: 1em;
        width: 25%;
        height:10%;
    }

    .viewhover .mask2 img {
        float: left;
        position: relative;
        margin-left:5%;
        width: 70%;
        margin-left:15%;
     }

    .viewhover .mask img:hover, .viewhover .mask2 img:hover {
        border: 0.2em solid #0e65d0;
    }


    /* La configuration 1 ---> AFFICHE 
    ************************************ */

    .view-affiche img { 
        transition: all 0.2s linear;
    }

    .view-affiche .mask, .view-affiche .mask2 {
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.9);
        transition: all 0.4s ease-in-out;

    }

    .view-affiche p { 
        transform: translateY(100px);
        opacity: 0;
        transition: all 0.2s linear;
    }

    .view-affiche .info {

    }

    .view-affiche .info:hover {
        opacity: 1;
        transition: all 0.2s ease-in-out;
    }

    .view-affiche:hover img { 
        transform: scale(0.5);
        opacity: 1;

    .view-affiche:hover .mask, .view-affiche:hover .mask2  { 
        opacity: 1;
    }

    .view-affiche:hover p,
    .view-affiche:hover a.info {
        opacity: 1;
        transform: translateY(0px);
    }

    .view-affiche:hover p {
        transition-delay: 0.1s;
    }

    .view-affiche:hover a.info {
        transition-delay: 0.2s;
    }

    .view-second img {     
        transition: all 0.2s ease-in;
    }
    .view-second .mask { 
        background-color: rgba(115,146,184, 0.7); 
        width: 300px;
            padding: 60px;
        height: 300px;
        opacity: 0;
        transform: translate(265px, 145px) rotate(45deg);
        transition: all 0.2s ease-in-out;
    }
    .view-second h2 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: translate(200px, -200px);
        transition: all 0.2s ease-in-out;
    }
    .view-second p { 
        transform: translate(-200px, 200px);
        transition: all 0.2s ease-in-out;
    }
    .view-second a.info { 
        transform: translate(0px, 100px);
        transition: all 0.2s 0.1s ease-in-out;

    .view-second:hover .mask { 
        opacity:1; 
        transform: translate(-80px, -125px) rotate(45deg);
    }                              
    .view-second:hover h2 { 
        transform: translate(0px,0px);
        transition-delay: 0.3s; 
    }
    .view-second:hover p { 
        transform: translate(0px,0px); 
        transition-delay: 0.4s;
    }
    .view-second:hover a.info { 
        transform: translate(0px,0px); 
        transition-delay: 0.5s;
    }

    .view-third img {     
        transition: all 0.2s ease-in; 
    }

    .view-third .mask { 
        background-color: rgba(0,0,0,0.6);
        opacity: 0;
        transform: translate(460px, -100px) rotate(180deg);
        transition: all 0.2s 0.4s ease-in-out;
    }

    .view-third h2{
        transform: translateY(-100px);
        transition: all 0.2s ease-in-out;
    }

    .view-third p { 
        transform: translateX(300px) rotate(90deg);
        transition: all 0.2s ease-in-out;
    }

    .view-third a.info { 
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out;

    .view-third:hover .mask { 
        opacity:1; 
        transition-delay: 0s;                             
        transform: translate(0px, 0px);
    }
    .view-third:hover h2 { 
        transform: translateY(0px); 
        transition-delay: 0.5s; 
    }

    .view-third:hover p    { 
        transform: translateX(0px) rotate(0deg);
        transition-delay: 0.4s;
    }
    .view-third:hover a.info { 
        transform: translateY(0px);
        transition-delay: 0.3s;
    }

    .view-fourth img { 
        transition: all 0.4s ease-in-out 0.2s;
        opacity: 1;
    }

    .view-fourth .mask { 
        background-color: rgba(0,0,0,0.8);
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        transition: all 0.4s ease-in;
        border-radius: 0px;
    }

    .view-fourth h2{
        opacity: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transition: all 0.5s ease-in-out;
    }

    .view-fourth p { 
        opacity: 0;
        transition: all 0.5s ease-in-out;
    }
    .view-fourth a.info { 
        opacity: 0;
        transition: all 0.5s ease-in-out;

    .view-fourth:hover .mask { 
        opacity: 1; 
        transform: scale(1) rotate(0deg);
        transition-delay: 0.2s;
    }                                  
    .view-fourth:hover img       { 
        transform: scale(0); 
        opacity: 0;
        transition-delay: 0s;
    }                        
    .view-fourth:hover h2,
    .view-fourth:hover p,
    .view-fourth:hover a.info{
        opacity: 1;
        transition-delay: 0.5s;
    }

    .view-fifth img {
        transition: all 0.3s ease-in-out; 
    }
    .view-fifth .mask { 
        background-color: rgba(146,96,91,0.3);
        transform: translateX(-300px);
        opacity: 1;
        transition: all 0.4s ease-in-out; 
    }
    .view-fifth h2{
        background: rgba(255, 255, 255, 0.5);
        color: #000;
        box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
    }
    .view-fifth p{
        opacity: 0;
        color: #333;
        transition: all 0.2s linear;
    }
    .view-fifth:hover .mask { 
        transform: translateX(0px);
    }                        
    .view-fifth:hover img { 
        transform: translateX(300px);
        transition-delay: 0.1s;
    }
    .view-fifth:hover p{
        opacity: 1;
        transition-delay: 0.4s;
    }
    .view-sixth img { 
        transition: all 0.4s ease-in-out 0.5s; 
    }
    .view-sixth .mask{ 
        background-color: rgba(146,96,91,0.5);
        opacity:0;
        transition: all 0.3s ease-in 0.4s;
    }
    .view-sixth h2{
        opacity:0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: scale(10);
        transition: all 0.3s ease-in-out 0.1s;
    }
    .view-sixth p { 
        opacity:0;
        transform: scale(10);
        transition: all 0.3s ease-in-out 0.2s;
    }
    .view-sixth a.info { 
        opacity:0;
        transform: translateY(100px);
        transition: all 0.3s ease-in-out 0.1s;
    }

    .view-sixth:hover .mask {  
        opacity:1; 
        transition-delay: 0s;
    }                                                                             
    .view-sixth:hover img { 
        transition-delay: 0s; 
    }
    .view-sixth:hover h2 { 
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.1s;
    }
    .view-sixth:hover p { 
        opacity:1; 
        transform: scale(1);
        transition-delay: 0.2s;
    }
    .view-sixth:hover a.info { 
        opacity:1;
        transform: translateY(0px);
        transition-delay: 0.3s;
    }
    .view-seventh img{
        transition: all 0.5s ease-out;
        opacity: 1;
    }
    .view-seventh .mask { 
        background-color: rgba(77,44,35,0.5);
        transform: rotate(0deg) scale(1);
        opacity: 0;
        transition: all 0.3s ease-out;
        transform: translateY(-200px) rotate(180deg);
    }
    .view-seventh h2{
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out;
    }
    .view-seventh p { 
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out;
    }
    .view-seventh a.info { 
        transform: translateY(-200px);
        transition:  all 0.2s ease-in-out;

    .view-seventh:hover img{
        transform: rotate(720deg) scale(0);
        opacity: 0;
    }
    .view-seventh:hover .mask { 
        opacity: 1;  
        transform: translateY(0px) rotate(0deg);
        transition-delay: 0.4s;
    }                                                                                        
    .view-seventh:hover h2 { 
        transform: translateY(0px);
        transition-delay: 0.7s;
    }
    .view-seventh:hover p { 
        transform: translateY(0px);
        transition-delay: 0.6s;
    }
    .view-seventh:hover a.info { 
        transform: translateY(0px);
        transition-delay: 0.5s;
    }
    .view-eighth .mask { 
        background-color: rgba(255, 255, 255, 0.7);
        top: -200px;
        opacity: 0;
        transition: all 0.3s ease-out 0.5s;
    }
    .view-eighth h2{
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out 0.1s;
    }
    .view-eighth p { 
        color: #333;
        transform: translateY(-200px);
        transition: all 0.2s ease-in-out 0.2s;
    }
    .view-eighth a.info { 
        transform: translateY(-200px);
        transition:  all 0.2s ease-in-out 0.3s;

    .view-eighth:hover .mask { 
        opacity: 1; 
        top: 0px; 
        transition-delay: 0s; 
        animation: bounceY 0.9s linear;
    }                                                                                        
    .view-eighth:hover h2 { 
        transform: translateY(0px);
        transition-delay: 0.4s;
    }
    .view-eighth:hover p { 
        transform: translateY(0px);
        transition-delay: 0.2s;
    }
    .view-eighth:hover a.info { 
        transform: translateY(0px);
        transition-delay: 0s;
    }
    .view-ninth .mask-1,
    .view-ninth .mask-2{
        background-color: rgba(0,0,0,0.5);
        height: 361px;
        width: 361px;
        background: rgba(119,0,36,0.5);
        opacity: 1;
        transition: all 0.3s ease-in-out 0.6s;
    }
    .view-ninth .mask-1 { 
        left: auto;
        right: 0px;
        transform: rotate(56.5deg) translateX(-180px);
        transform-origin: 100% 0%;
    }
    .view-ninth .mask-2 { 
        top: auto;
        bottom: 0px;
        transform: rotate(56.5deg) translateX(180px);
        transform-origin: 0% 100%;
    }
    .view-ninth .content{
        background: rgba(0,0,0,0.9);
        height: 0px;
        opacity: 0.5;
        width: 361px;
        overflow: hidden;
        transform: rotate(-33.5deg) translate(-112px,166px);
        transform-origin: 0% 100%;
        transition: all 0.4s ease-in-out 0.3s;
    }
    .view-ninth h2{
        background: transparent;
        margin-top: 5px;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .view-ninth a.info{
        display: none;
    }

    .view-ninth:hover .content{
        height: 120px;
        width: 300px;
        opacity: 0.9;
        top: 40px;
        transform: rotate(0deg) translate(0px,0px);
    }
    .view-ninth:hover .mask-1,
    .view-ninth:hover .mask-2{
        transition-delay: 0s;
    }
    .view-ninth:hover .mask-1{
        transform: rotate(56.5deg) translateX(1px);
    }
    .view-ninth:hover .mask-2 {  
        transform: rotate(56.5deg) translateX(-1px);
    }

    .view-tenth img { 
        transform: scaleY(1);
        transition: all 0.7s ease-in-out;
    }
    .view-tenth .mask { 
        background-color: rgba(255, 231, 179, 0.3); 
        transition: all 0.5s linear;
        opacity: 0;
    }    
    .view-tenth h2{
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        background: transparent;
        margin: 20px 40px 0px 40px;
        transform: scale(0);
        color: #333;
        transition: all 0.5s linear;
        opacity: 0;
    }
    .view-tenth p {
        color: #333;
        opacity: 0;
        transform: scale(0);
        transition: all 0.5s linear;
    }
    .view-tenth a.info { 
        opacity: 0;
        transform: scale(0);
        transition: all 0.5s linear;
    }

    .view-tenth:hover img { 
        transform: scale(10);
        opacity: 0;
    }
    .view-tenth:hover .mask { 
        opacity: 1;
    }                                                                             
    .view-tenth:hover h2,
    .view-tenth:hover p,
    .view-tenth:hover a.info{ 
        transform: scale(1);
        opacity: 1;
    }
    </style>

    code ok au 27-11-17
    *******************

    <style type="text/css">

    /* *************************
    **    View : survol images **
    ************************** */

    .viewhover {
        float: left;
        overflow: hidden;
        position: relative;
        text-align: center;
        box-shadow: 1px 1px 2px #e6e6e6;
        cursor: default;
        background-image: #fff url('sites/ikino/files/bandeau-ikino.jpg') no-repeat     center center;
        background-size: cover;
    }

    /* le champ paragraph
    *********************** */
    .viewhover .mask p {
        height:4em;
    }

    /* toute la zone MASK & MASK2
    ******************************** */
    .viewhover .mask  {
        position: absolute;
        overflow: hidden;  
        padding:0.3em;
        height:40%;
        left: 0;
        top: 0; 
    }

    .viewhover .mask2  {
        position: absolute;
        height:60%;
        left: 0;
        bottom: 0.3em; 
    }

    /* toute les images 
    ******************* */
    .viewhover img {
        border-radius: 1em;
        box-shadow: 0 0 6px 0px #178acc;
    }

    .viewhover .mask img {
        float: left;
        position: relative;
        margin-left:5%;
        border-radius: 1em;
        width: 27%;
    }

    .viewhover .mask2 img {
        float: left;
        position: relative;
        margin-left:10%;
        width: 80%;

     }

    .viewhover .mask img:hover, .viewhover .mask2 img:hover {
        border: 0.2em solid #0e65d0;
    }


    /* La configuration 1 ---> AFFICHE 
    ************************************ */

    .view-affiche img { 
        transition: all 0.2s linear;
    }

    .view-affiche .mask {
        opacity: 0;
        background-color: rgba(255, 255, 255, 1);
        transition: all 0.4s ease-in-out;
    }

    .view-affiche .mask2 {
        opacity: 0;
        transition: all 0.4s ease-in-out;
    }

    .view-affiche:hover img { 
        opacity: 0;

    .view-affiche:hover .mask img, .view-affiche:hover .mask2 img  { 
        opacity: 1;

    .view-affiche:hover .mask, .view-affiche:hover .mask2  { 
        opacity: 1;
    }

    .view-affiche .mask img:hover  { 
        transform: scale(1.3);
    }

    .view-affiche .mask2 img:hover  { 
        bottom:-45%; 
        transform: scale(1.1);
    }

    </style>


    .viewhover .mask  {
        position: absolute;
        overflow: hidden;  
        padding:0em 05.em 0em 0em;
        z-index:1000;
        left: 0;
        top: 0; 
    }


    .viewhover .mask .voir_terme .liste_terme {
        float: right;
        display: none; 
        margin:0.5em 0.5em 0em 0em;
        padding:0em 05.em 0em 0em;
        text-align: right;
        background-color: #fff; 
    }

    .viewhover .mask .voir_terme:hover .liste_terme {
        display: block; 
    }

    .viewhover .mask .voir_terme .liste_terme a {
        padding:0.3em;
        list-style: none;
    }

    .viewhover .mask .voir_terme .liste_terme li {
        list-style: none;
    }

    .viewhover .mask2  {
        position: absolute;
        z-index:500;
        left: 0;
        bottom: 0; 
    }
     

  • Module Drupal 8 - Geolocation Field

    Geolocation field est un module Drupal 7 et 8 qui, comme son nom l'indique, permet d'ajouter un champs à ses types de contenus de type "Position GPS".

    En backoffice on peut proposer une google map avec champ de recherche et l'administrateur pourra ainsi placer le pointeur précisement :

  • Create a Google Map with Location Markers in Drupal 8

    The Geolocation Field Module allows us to store geographical locations (e.g. addresses) as value pairs (latitude, longitude). These values can be rendered in a map with the help of a map marker.

    Many map markers in a map are useful in a wide variety of cases, for example to show graphically different offices of a bank in a city or to show the cities/countries of a concert tour of your favorite band. The possibilities are endless.

    In this tutorial we are going to learn how to show the markers in a map of four tourist attractions in New York City. We're going to use the Geolocation Field module and Views.