Bonjour, J'aimerais réaliser un effet sympathique sur une image (pas l'effet de couleur mais l'autre) comme ici https://www.pinterest.fr/pin/452119250088622534/ , malheureusement je ne sait comment faire, auriez vous des pistes pour moi ? merci de votre aide 

-
Edité par MalvynNouvel 16 novembre 2018 à 15:00:36

Salut,

c'est quoi l'effet ?
Les parties gauche et droite cachées ?

j'ai modifié mon post, il était pas clair, je te laisse regarder le lien

Un exemple :

http://www.frogweb.fr/demos/figure-hover.html

Pour d'autres trucs :

http://www.frogweb.fr/demos/

-
Edité par Frogweb 16 novembre 2018 à 12:17:11

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Effet image)

J'ai pas trop compris comment je dois modifier mon titre lamecarlate.. c'est un effet sur une image en css donc..

Frogweb, merci, mais..je sais appliquer un filtre, ce n'es pas ça le problème. Si tu observe bien attentivement, tu remarque un petit effet du a des "petits carrés ?" très fin, qui fait tout le charme. 

Salut,

J'ai cherché sur la page mise en lien quelque chose qui ressemblait à "un effet avec des petits carrés très fins" et je n'ai rien vu qui ressemble à cela...

Difficile de t'aider si l'on ne sait pas de quoi tu parles. Essaye de décrire plus précisément ce que tu veux, de nous montrer des captures d'écran précises, etc etc. 

Mewen_bzh a écrit:

Salut,

J'ai cherché sur la page mise en lien quelque chose qui ressemblait à "un effet avec des petits carrés très fins" et je n'ai rien vu qui ressemble à cela...

Difficile de t'aider si l'on ne sait pas de quoi tu parles. Essaye de décrire plus précisément ce que tu veux, de nous montrer des captures d'écran précises, etc etc. 

Pas mieux... Effectivement il va falloir être très précis pour nous faire comprendre.

EDIT : Ok j'ai compris... Il fallait allez jusqu'au bout des clics :

https://dribbble.com/shots/4976945-Mobile-Art-Direction/attachments/1114383

Cet effet est dans l'image, rien a voir avec html/css.

-
Edité par Frogweb 16 novembre 2018 à 15:12:24

C'est plus ou moins le même effet que sur:  http://hungrymusic.fr/  des carrés fin qui donne un effet a l'image. On le vois bien sur ce site.

En zoomant sur la capture d'écran: j'obtient ceci, si vous arrivez a voir: 

-
Edité par MalvynNouvel 16 novembre 2018 à 15:13:45

Ce sont deux choses différentes, d'un côté l'effet est sur l'image, de l'autre c'est un simple background :

http://hungrymusic.fr/wp-content/themes/brooklyn/images/overlay-pattern.png

Merci en tout cas pour votre attention, et votre patience pour le coup. Si cela est clair j'aimerais reproduire l'effet du premier lien que je vous est envoyé. Vous avez des solutions ? Car oui il est dans l'image ici, mais si je veux intégrer cette maquette et que cela marche pour n'importe quel photo.

-
Edité par MalvynNouvel 16 novembre 2018 à 15:26:41

Tu veux dire comme ici ? :

https://dribbble.com/shots/4976945-Mobile-Art-Direction/attachments/1114383

Tu ne peux pas... Enfin tu pourrais mais il faudrait faire des dizaines de div de 1px sur 1px par dessus l'image sans même savoir combien si les images sont de tailles différentes.

EDIT : peut-être une solution en JS... ?

-
Edité par Frogweb 16 novembre 2018 à 16:51:53

Hum, si, je pense que c'est faisable relativement facilement :

• sur le conteneur de l'image, on ajoute un pseudo-élément positionné par-dessus et prenant toute la taille
• ce pseudo-élément reçoit un background de ce style-là : https://leaverou.github.io/css3patterns/#carbon-fibre (évidement il faudra trafiquer pour remettre les lignes "droites", et le fond doit avec du rgba() avec une valeur d'alpha inférieure à 1

Lamecarlate a écrit:

Hum, si, je pense que c'est faisable relativement facilement :

• sur le conteneur de l'image, on ajoute un pseudo-élément positionné par-dessus et prenant toute la taille
• ce pseudo-élément reçoit un background de ce style-là : https://leaverou.github.io/css3patterns/#carbon-fibre (évidement il faudra trafiquer pour remettre les lignes "droites", et le fond doit avec du rgba() avec une valeur d'alpha inférieure à 1

Joli, bien vu Lamecarlate ! On voit que tu as fait parti de la dreamteam

Ah bin ensuite, faut tester, je fais de mémoire

(et sinon, pour le renommage du sujet : moi j'aurais justement décrit l'effet attendu. Dire "c'est un effet sur une image", ça revient un peu à dire "j'ai un bruit dans ma voiture" quand on va au garage, c'est… vrai, mais succinct)

Bien vu le radial-gradient =)

Voila le résultat pour ceux qui n'y arriveraient pas.

https://codepen.io/mootookoi/pen/JeyEVL

mootookoi a écrit:

Bien vu le radial-gradient =)

Voila le résultat pour ceux qui n'y arriveraient pas.

https://codepen.io/mootookoi/pen/JeyEVL

Tu as posté dans le bon sujet ?

Merci ! Je tend petit a petit vers le résultat escompté: 

.img{
  width:200px; 
  height:200px;                background:url("http://www.arma3.de/content/images/FGN_CauRebels_01.jpg") center;
}

.filtre{
 width:200px; 
  height:200px;      background:rgba(231,52, 52, 0.3);
}

.filtre2{
  position:absolute;
background:radial-gradient(grey 1%, transparent 1%) 0 0,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 1px 1px;
background-size:8px 8px;
  width:200px; 
  height:200px;  
}

<div class="img">
   <div class="filtre2"> 
      <div class="filtre">test</div>
  </div> 
</div>

Je met le sujet en résolu !

-
Edité par MalvynNouvel 19 novembre 2018 à 14:51:27

Frogweb a écrit:

mootookoi a écrit:

Bien vu le radial-gradient =)

Voila le résultat pour ceux qui n'y arriveraient pas.

https://codepen.io/mootookoi/pen/JeyEVL

Tu as posté dans le bon sujet ?

J'avais posté dans le bon sujet mais j'ai modifié mon Pen sans faire exprès.

J'ai corrigé mon erreur par contre ce n'est pas aussi beau que ce que j'avais fait à l'origine. =p

MalvynNouvel : tu n'es pas obligé⋅e de faire deux conteneurs, c'est possible de mettre une couleur de fond + des images (oui, les gradients CSS sont considérés comme des images) dans une seule déclaration de background.

Cela marche comme cela néanmoins, le problème est que la couleur passe derrière l'image et non devant, et si je met la couleur avant l'image dans background, rien ne s'affiche

.image {
	width: 600px;
	height: 95vh;
	position: relative;
	background: url('https://lh3.googleusercontent.com/-FJTuiZxPGRc/TyvQlPOBLcI/AAAAAAAAAC4/Ji7Vv7xAs7M/w530-h530-n/zozor.jpg') no-repeat center,rgba(250,12, 76, 0.5);
	background-size: contain;
}
.image:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background:radial-gradient(grey 15%, transparent 6%) 0 0;
	background-color:rgba(255,255,255,.5);
	background-size:8px 8px;
}

body {
  display: flex;
  justify-content: center;
}

<body class="body">
	<div class="image"></div>
</body>

solution trouvé ! En prenant compte de toute vos remarques je suis arrivé a: 

.image {
	width: 600px;
	height: 95vh;
	position: relative;
	background: url('https://lh3.googleusercontent.com/-FJTuiZxPGRc/TyvQlPOBLcI/AAAAAAAAAC4/Ji7Vv7xAs7M/w530-h530-n/zozor.jpg') no-repeat center;
	background-size: contain;
}
.image:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background:radial-gradient(grey 15%, transparent 6%) 0 0;
	background-color:rgba(255,255,255,.5);
	background-size:8px 8px;
}


.image::before{
	background-color:rgba(250,12, 76, 0.5);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

body {
  display: flex;
  justify-content: center;
}

Merci a vous !

-
Edité par MalvynNouvel 20 novembre 2018 à 12:47:34

body {
  display: flex;
  justify-content: center;
}

J'ai mis ça dans mon Pen pour centrer la div.

Si tu mets ça sur ton site, ça risque de casser tout le design.

Oui t'en fait pas je l'ai enlevé, d'ailleurs j'ai modifié deux trois trucs pour un meilleur résultat. A vrai dire il me reste un soucis avec cette solution, Quand je rajoute du texte par dessus cette image comme dans le premier lien que j'ai donné. Le texte prend la couleur du before et les petit points de l'after.. alors que je voudrais juste que le texte reste blanc..

-
Edité par MalvynNouvel 20 novembre 2018 à 22:32:59

J'ai modifié mon Pen pour régler ton problème d'image.

Note le "position: relative;" sur body.

Dans ton cas, tu devras faire cette déclaration sur le conteneur de tes deux divs ( .image et .texte)

T'es au top ! problème réglé !