Bonjour à toutes et à tous!

J'ai créé une vue qui me permet d'afficher un ensemble de thumbnail.

Dans celui-ci, j'ai un lien (qui contient l'ensemble du thumbnail), une image et du texte.

J'aimerai qu'au survol de mon thumbnail, un point d'interrogation apparaisse en grand devant toute ma thumbnail et que le fond devienne un peu plus clair, comme si on avait ajouté un filtre. Il faut aussi qu'il soit possible de cliquer sur le lien pour être redirigé malgré le point d'interrogation

J'ai trouvé un exemple qui donne un peu l'idée de ce que je veux faire:

http://jsfiddle.net/YWvqw/1/

Le problème, c'est que quand je tente de l'implémenter, tout mon contenu est poussé vers le bas :/

Le point d'interrogation peut être une image ou un "simple" ? stylisé, peu m'importe mais je ne sais pas trop comment le faire.

Je vous donne mon html pour que vous compreniez avec quoi je veux faire ça:

                        <div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 thumb">
                            <a class="thumbnail application" href="#">
                                <div class="application-img-frame">
                                    <img class="img-responsive"
                                         src="#"
                                         alt="Une application">
                                </div>
                                <h4>
                                    Une application
                                </h4>
                            </a>
                        </div>

Au niveau du CSS, j'ai ça et du bootstrap :

.thumbnail.application {
    height: 130px;
}

.thumbnail.application img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.thumbnail.application h4 {
    font-size: 80%;
    text-align: center;
}

.thumbnail.application .application-img-frame {
    height: 65%;
    position: relative;
}

Merci!

pour cela il te faut du js(javascript)

Salut !

Quelques erreurs de sens dans ton HTML (notamment H4 alors qu'il n'y a pas de H3 dans la même section ?).

Je n'ai pas bien compris où tu voulais mettre ton "?" mais voici un exemple pour réaliser ce que tu veux : http://codepen.io/Rys_Navlys/pen/ZLeYMy

Hésite pas à demander si tu as besoin. Bon courage !

Merci pour vos réponses!

rayan BS a écrit:

pour cela il te faut du js(javascript)

Pourquoi faut-il du JS? Avec le hover, ça a l'air de plutôt bien fonctionner, non? Dans quel cas le JS est il nécessaire?

Rys_Navlys a écrit:

Quelques erreurs de sens dans ton HTML (notamment H4 alors qu'il n'y a pas de H3 dans la même section ?).

Eh bien, un H4 car le H3 rendait mal, il était trop grand, ça n'était pas beau.

Il faut utiliser une autre méthode dans ce cas?

Rys_Navlys a écrit:

Je n'ai pas bien compris où tu voulais mettre ton "?" mais voici un exemple pour réaliser ce que tu veux : http://codepen.io/Rys_Navlys/pen/ZLeYMy

Ca m'a l'air pas mal! Je vais tester de suite! Je reviens vers vous avec la solution finale !
(si jamais quelqu'un, dans 2 ans cherchera la même chose, il trouvera une solution comme ça!

Merci à vous deux

EDIT:

Bon, ça fonctionne mais ce n'est pas encore parfait!

Lorsque j'ai une taille "standart", ça fonctionne bien. Sauf que mon site est responsive, et si les thumbnail changent de taille, le "?" reste collé à gauche, malgrès le 'text-align = center'.

Bon, de plus, j'ai oublié de redimensionner mes images lorsque la taille change.

Une idée pour faire ça proprement?

Taille standart:

Grande taille:

HTML:

<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 thumb">
                            <a class="thumbnail application" href="#">
                                <div class="overlay col-lg-2 col-md-4 col-sm-4 col-xs-6">?</div>
                                <div class="application-img-frame">
                                    <img class="img-responsive"
                                         src="#"
                                         alt="Mon application">
                                </div>
                                <h4>
                                    Mon application
                                </h4>
                            </a>
                        </div>

CSS:

.thumbnail.application {
    height: 130px;
}

.thumbnail.application img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.thumbnail.application h4 {
    font-size: 80%;
    text-align: center;
}

.thumbnail.application .application-img-frame {
    height: 65%;
    position: relative;
}

.overlay{
    font-size: 100px;
    line-height: 120px;
    text-align: center;
    display: none;
    position: absolute;
    z-index: 50;
}

.thumb:hover .overlay {
    display: block;
}

.thumb:hover .application-img-frame {
    opacity: 0.7;
}

Merci!

PS: j'ai ajouté un Z-index pour que le "?" apparaisse bien à l'avant de l'image !

-
Edité par Whouki 20 janvier 2017 à 9:57:55

Du js tout simplement car qu'on applique un hover a un element on peut changer faire des modif que sur ce dernier Mais si tu veux par exemple  que quand tu survole un element; un autre apparait, s'agrandi ... et bien c du js qu'il faut... c mieux et c plus pratique

Je ne voulais appliquer que l'élément sur l'objet donc le hover suffisait amplement

PS: Il te manque un espace dans ta signature

Salut !

Pas besoin de javascript si le :hover suffit. Il faut toujours faire au plus simple, ça t'évitera pas mal d'erreurs.

Concernant les <h3>, <h4>, le sens est plus important que la forme : la hiérarchie doit commencer avec des <h1>, puis les sous-titres sont des <h2>, puis les sous-titres des <h2> sont des <h3> etc. Et cela sur 6 niveaux (jusqu'à <h6>). Du coup, dans ton document tu indiques au navigateur : "Voici un titre de quatrième niveau". Ce à quoi il pense très fort en te maudissant sur 7 générations : "Mais il est où le titre de troisième niveau qui le contient ? J'y comprends rien à son histoire !" 

La mise en forme par défaut (décidée par ton navigateur, donc différente sur un autre navigateur) peut être changée via CSS :

h1 {
  color: blue;
  font-size: 2em;
  text-decoration: overline;
}

Ainsi tu peux placer des h1 partout et les transformer en le visuel que tu souhaites.

Pour la taille de ton images, il te faut indiquer une hauteur et une largeur maximales à l'aide de max-width et max-height. Ainsi, ton image ne débordera jamais du cadre et adoptera la taille la plus grande restant dans le cadre.

Et pour le "?", tu peux noter  que j'ai défini une largeur : en effet, en indiquant une "position:", le block n'occupe plus toute la largeur disponible : il faut donc lui indiquer la même largeur que ton cadre.

Je te laisse revoir ton code et revenir vers nous, mais tu es à 2 pas d'obtenir ce que tu veux ! Bon courage !

J'ai suivi tes conseils, et c'est bon, ça fonctionne!

Merci!

J'ai juste encore un peu du mal à comprendre au niveau des H1, H2, ...

Dans mon application, parfois sur une page, je veux un titre très grand, je vais donc utiliser un H1.

Dans une autre page, je vais vouloir aussi un titre mais plus petit que le précédent. Le fait de devoir redéfinir le H1 spécifiquement pour ça, je trouve ça lourd plutôt que d'utiliser le H2 qui serait tout aussi efficace!

Je vais voir un peu ce que je peux faire pour uniformiser le tout!

Encore merci pour tes conseils Rys_Navlys

Bonne journée!