Bonjour à tous,

Je cherche à faire 2 effets mais le CSS un peu "poussée" n'est pas trop mon fort et du coup je suis un peu en galère. Je voudrais superposer 2 blocs un peu en décalé avec un contenu différent dans chacun d'eux.

Voici un exemple en image

J'ai essayé des choses mais c'est pas très propre je trouve. J'utilise le système de grille de Bootstrap avec et le top ce serait que sur mobile les 2 blocs se mettent l'un en dessous de l'autre.

J'ai aussi un autre effet mais là je sèche vraiment. Je voudrais faire une image ronde et quand je passe la souris dessus je voudrais qu'un filtre de couleur recouvre l'image avec un texte par dessus. J'ai fouillé un peu mais je n'ai pas trouvé de truc qui fonctionnent comme je voudrais...

Si quelqu'un pouvait m'aider ce serait très sympa, merci d'avance

Salut,

Tu peux faire un tour de ce côté : https://developer.mozilla.org/fr/docs/Web/CSS/transform pour éviter de tout casser, par exemple pour ne pas avoir la superposition sur mobile, fais un tour sur les media query qui te permettent de conditionner ton style en fonction de la taille de l'écran : https://developer.mozilla.org/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries

En espérant t'avoir aider.

-
Edité par Martin PAUCOT 15 janvier 2018 à 16:25:57

Merci pour ta réponse.

Effectivement je fais tellement peu de CSS que j'ai zappé toutes ces propriétés transform, c'est exactement ce qu'il me fallait pour mes blocs. J'avais fait des trucs à base de position relative mais je trouvais pas ça génial.

Du coup de ce côté là, ça m'arrange bien, merci

Par contre pour mes vignettes rondes avec effet de hover je trouve rien

Effectivement j'ai totalement lu en diagonale et est passé à travers tes fameuses vignettes rondes !

Voici un petit exemple, regarde le code, essaye de le comprendre et ça va venir tout seul. Si tu as des questions n'hésite pas !

https://jsfiddle.net/jwcsfqrm/1/

-
Edité par Martin PAUCOT 15 janvier 2018 à 17:00:20

Merci pour ton aide.

Je totalement oublié de préciser, je cherche une solution sans passer par un background-image mais plutôt une balise <img>

Pour le coup cela il suffit de remonter d'un cran et d'avoir une div comprenant ton image et ta div avec le texte. Les deux en absolute avec pour taille 100% et si besoin mettre le z-index du contenu au dessus de celui de l'image.

Ensuite au lieu d'utiliser :hover sur l'image on l'utilise sur le conteneur qui contient l'image et le contenu, petit exemple :

https://jsfiddle.net/jwcsfqrm/3/ 

Petit à petit tu verras, les solutions viendront toutes seules

-
Edité par Martin PAUCOT 15 janvier 2018 à 17:26:49

J'ai un peu modifié le code que tu m'a donné mais je m'en suis très bien sorti avec tes exemples. J'ai réussi à faire tout ce que je voulais, je t'en remercie

C'est vraiment sympa d'avoir pris le temps de m'aider