Effet assombrissement d'image (WordPress)

IRGamer

IRGamer

Elite
Bonjour,

Je souhaiterais appliquer ce genre d’effet (https://www.vtc-belgium.com/city) sur mes mosaïques, mais je ne sais pas du tout comment m’y prendre, auriez vous une idée de la marche à suivre svp.
Car actuellement mes images sont très claire du coup on n’arrive pas a bien lire les textes qu’il y a dessus, l’ideal serait de mettre un effet d’assombrissement lorsque le texte est visible, et une fois le pointeur de la souris dessus mettre un bouton qui renvoie vers une autre page, vraiment comme sur le lien que j’ai mis plus haut.

Mon site actuel: viabrussels.com

Merci.
 
cedb3

cedb3

Elite
Les images de ton thème ont une opacité de 50% c'est ce qui les rend très claires. Voilà un bout de css pour régler ton souci :) Il faut l'ajouter quelque part dans ton thème.

J'ai ajouté un bloc noir avec une opacité de 25% sur les images et 50% quand on passe la souris dessus. Ainsi qu'une ombre sur le texte pour qu'il soit plus lisible. Tu peux changer ces valeurs comme tu veux.




Code: 
.imghover {
    opacity: 1;
}
 
.imghover .vc_column-inner {
    position: relative;
    width: 100%;
    z-index: 1;
}
 
.imghover .vc_column-inner:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.25;
    transition: all 0.3s;
}
 
.imghover:hover .vc_column-inner:after {
    opacity: 0.50;
}
 
.imghover .vc_column-inner .wpb_wrapper {
    position: relative;
    z-index: 1;
    text-shadow: 0 0 30px rgba(0,0,0,0.5);
}
 
1er
OP
IRGamer

IRGamer

Elite
Ah super merci ! :)
 
1er
OP
IRGamer

IRGamer

Elite
eGm_ a dit:
Tu connais l'inspecteur de Firefox ?
Cliquez pour agrandir...

Oui j'utilise surtout Chrome mais oui je connais l'outil et l'utilise "assez souvent" mais c'est vrai que je peu aussi l'utiliser pour piquer les codes css des autres sites non ? :D
 
eGm_

eGm_

Gibon Blasé
IRGamer a dit:
Oui j'utilise surtout Chrome mais oui je connais l'outil et l'utilise "assez souvent" mais c'est vrai que je peu aussi l'utiliser pour piquer les codes css des autres sites non ? :D
Cliquez pour agrandir...
Exactement
 
Connectez-vous pour réagir !
Haut