Ajouter un fond translucide derrière un hover d'image

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonjour à tous et toutes,

cette demande fait suite à un code de Toryudo d'il y a 2 ans, qui permet, lors du survol de l'avatar, d'afficher l'image en hover bien plus grande pour que l'on puisse s'immerger dans le JDR, et y voir tous les détails du personnage.

Avec le temps, je me rends compte qu'il serait mieux d'y ajouter un fond légèrement translucide, sombre, pour que le regard se focus sur l'image sans devoir forcer avec les couleurs du forum (Les joies de vieillir...).

Malheureusement j'ai tenté des alternatives et le "shadow" se met à clignoter au passage de la souris sans que l'image apparaisse... C'est assez frustrant.

Voici le code qui fonctionne :

Code:

$(function() {
$('.englob').hover(function(){
    $('#result').remove();
 
    var idLink = $(this).find('.imgp a').attr('href');
    var $result = $("<div id='result'></div>");
 
    if ($(this).find('.multi_hoveravatar').text().length > 0){
        $result.html('<img src="' +  $(this).find('.multi_hoveravatar').text() + '" alt="" />');
    }
    else {
        $result.load(idLink + ' .boxRPG ', function (){
            $result.html($result.find('img')[0]);
        });
    }
 
    $("body").append($result);
 
}, function(){
    $('#result').remove();
});
});

Code:

/*=================== AVATAR HOVER RPG =================**/
#result img {display: block;position: fixed;z-index: 100;border: 2px groove #daac53;box-shadow: 0 0 4px #bd91c2;top: 50%;transform: translate(-50%, -50%);animation: opening 1s ease forwards;max-width: 50vh;max-height: 40vh;}
@keyframes opening { from { left: 54.6em; opacity: 0; max-height: 0%;} to { left: 55.3em; opacity: 1; max-height: 100%; }}
.multi_hoveravatar {display:none;}

Et le code "shadow" que j'ai créé à part qui devait avoir cette fonction :

Code:

   width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Fond sombre semi-transparent */

Mais rien n'y fait

---

Voici ma tentative de code :

Code:

$(function() {
    $('.englob').hover(function(){
        $('#result').remove();
       
        var idLink = $(this).find('.imgp a').attr('href');
        var $result = $("<div id='result'></div>");
        var $background = $("<div id='hover-background'></div>"); // Création du fond translucide noir
       
        // Ajout du fond translucide noir
        $background.css({
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            background: 'rgba(0, 0, 0, 0.5)', // Noir translucide
            zIndex: 99, // Derrière l'image
            display: 'none' // Initialement caché
        });
        $("body").append($background); // Ajouter le fond au body
        $background.fadeIn(200); // Animation d'apparition du fond
       
        if ($(this).find('.multi_hoveravatar').text().length > 0){
            $result.html('<img src="' +  $(this).find('.multi_hoveravatar').text() + '" alt="" />');
        }
        else {
            $result.load(idLink + ' .boxRPG ', function (){
                $result.html($result.find('img')[0]);
            });
        }
       
        // Ajouter l'image au body
        $("body").append($result);
       
    }, function(){
        $('#result').remove();
        $('#hover-background').fadeOut(200, function(){
            $(this).remove(); // Retirer le fond après le survol
        });
    });
});

/*=================== AVATAR HOVER RPG =================**/
#result img {
    display: block;
    position: fixed;
    z-index: 100;
    border: 2px groove #daac53;
    box-shadow: 0 0 4px #bd91c2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: opening 1s ease forwards;
    max-width: 50vh;
    max-height: 40vh;
}

@keyframes opening {
    from {
        left: 54.6em;
        opacity: 0;
        max-height: 0%;
    }
    to {
        left: 50%;
        opacity: 1;
        max-height: 100%;
    }
}

.multi_hoveravatar {
    display: none;
}


Merci à vous, cordialement

[Stefano123]

Bonjour Kaehlyth,

je ne suis pas calé dans le domaine,
Dans votre dernière tentative de code : j'y ai rajouté une transition en hover
1s est le temps de la transition et (1.4) est la grosseur du zoom que vous voulez mettre au passage de la souris !

Ceci est juste un exemple qui pourrait peut-être vous donner quelques idées !!

Code:

/*=================== AVATAR RPG =================**/
#result img {
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 0.6s ease;
}

/*=================== AVATAR HOVER RPG =================**/
#result img:hover {
-webkit-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -o-transform:scale(1.4);
    transform:scale(1.4);
}

Bon week-end,

Cordialement,

[Kaehlyth]

J'ai tenté cette transition oui, et pour une raison qui m'échappe, ça a la même finalité de "clignotement".

Une logique m'échappe !

Merci de votre intervention et votre aide.

[Stefano123]

Bonjour Kaehlyth,

Dans votre transition en hover, avez-vous essayé d'y rajouter ceci ?

Code:

opacity: 0.5;

Avec une petite capture d'image pour mieux cerner votre demande, cela pourrait peut-être mieux vous apporter une aide supplémentaire...
Enfin, je dis ça...

Bon lundi.

[Kaehlyth]

Bonjour,

c'est impossible de mettre un screenshoot, ce que j'aurai fait.
Le clignotement me rend immédiatement malade, ayant des facilités à vite tourner de l'oeil lorsque les choses clignotent.

Oui, mais l'opacité ne change rien puisque l'on parle d'une souris qui va sur l'avatar, qui créé un effet de hover d'image dans un cadre. L'ajout d'un fond avec un z-index moindre et une demi-opacité fait, pour une raison que j'ignore clignoter à la vitesse de l'éclair l'écran avec cet effet noir.


Sinon voici l'effet que je dispose déjà, et dont je souhaite assombrir l'arrière du forum pour mettre en avant l'image en "grand".

[Stefano123]

Rebonjour Kaehlyth,

Exemple : Si je viens m'enregistrer sur votre forum et en étant seulement un membre, est-ce que ce comportement, je le verrais également ?
Parce que là, l'image est figée, je n'ai aucune idée du comportement, de ce dysfonctionnement, donc, vous m'en voyez vraiment navré si je ne peux pas en faire plus,
Où a moins comme je vous dis, je viens m'enregistrer sur votre forum pour mieux visualiser la chose et essayer de vous aider au mieux,
et après vous me zappés...

À moins que quelqu'un d'autre vienne vous donner quelques bonnes théories et puisse vous aider au mieux à fin d'arriver à votre résolution.

Cordialement,

[Kaehlyth]

Je ne comprends pas ce que vous entendez par "zapper" ? Je n'ai pas d'enregistrement à votre nom.

Oui, si je change les codes, vous verrez dans une partie test.

Merci en tout cas de vos idées et de votre aide.

Cordialement,

[Stefano123]

Rebonjour Kaehlyth,

Exemple : Si je viens m'enregistrer sur votre forum et en étant seulement un membre, est-ce que ce comportement, je le verrais également ?
Parce que là, l'image est figée, je n'ai aucune idée du comportement, de ce dysfonctionnement, donc, vous m'en voyez vraiment navré si je ne peux pas en faire plus,
Où a moins comme je vous dis, je viens m'enregistrer sur votre forum pour mieux visualiser la chose et essayer de vous aider au mieux,
et après vous me zappés...

À moins que quelqu'un d'autre vienne vous donner quelques bonnes théories et puisse vous aider au mieux à fin d'arriver à votre résolution.

Cordialement,

Non, je ne suis pas inscrit dans votre forum,
Est-ce que votre souci, vos membres le voient pareillement ?
Si tel est le cas, je dis juste que, si je viens m'enregistrer dans votre forum en étant seulement un membre, cela sera un peu plus clair pour moi de voir le dysfonctionnement que vous rencontrez...

Après être venu m'enregistrer dans votre forum et essayer de vous apporter mon aide à résoudre votre souci... vous me zappez, cette à dire que vous m'effacez de votre forum, une fois le problème résolu, ou si je n'arrive pas à trouver une solution, vous me supprimez quand même de votre forum.

Cdt,