Avoir une bordure interne dans un DIV avec la fonction :hover

Bonjour tout le monde !
Je suis un grand novice en code, HTML CSS et autres joyeusetés

J'essaye de me créer un portfolio en ligne car je suis graphiste bref je passe cet episode, tout le monde "don't care about it"

Ce que j'aimerais, c'est avoir des "cases" (donc div je pense) bien rangées dans la page.

Et lorsque l'on passe sur une case, une bordure part du bas et se developpe SUR l'image et non en dessous (car ca j'ai réussi avec border-bottom)

Donc en sorte peut-on faire un border-bottom qui va vers le haut

.margebas {
	background-color:#333;
	border-bottom:0px solid #F00;
	opacity:0.6;
	
}

.margebas:hover {
	border-bottom:50px solid #F00;
	-webkit-transition: all 0.4s ease-out;
	opacity:1;
	
}

Voila ce que j'applique à mes div pour l'instant
Si c'est très très mauvais, je suis ouvert aux critiques, car effectivement je ne suis pas developpeur
Modifié par Digipen (26 Nov 2010 - 15:48)

Salut Digipen,

Désolé, mais je ne comprends pas ce que tu souhaites obtenir : tu veux que cette bordure apparaisse tout autour de l'image en commençant par le bas et en allant jusqu'en haut (dessous, puis gauche et droite, puis dessus) ? Ou alors c'est autre chose ?

P.S. : Le nom choisi pour ta classe n'est sûrement pas approprié, étant donné que tu sembles désigner des œuvres d'un portfolio, pas des "margebas".

Et aurais-tu une url montrant l'existant ?

Merci

Salut salut.
Merci de ta reponse.

Alors tout d'abord j'ai nommer .margebas parce que je fais une page de test de différents effets CSS dc je ne code pas tout ça sérieusement encore

Par contre je créer 3 div que je positionne et leur applique .margebas a tout les 3.

Est ce la bonne technique ? J'ai un doute d'un coup.

Tu peux voir ce que cela donne ici : http://www.lmip-artwork.com/Digipen%20web/

J'ai créer cet effet et je voudrais que la bande rouge, au lieu de se derouler vers le bas, se deroule vers le haut, c a dire quelle morde de x pixels sur l'image, en partant du bas de l'image.

Est ce plus clair ? Je voudrais si possible le faire en un seul div et non en supperposant

D'avance merci

Je pense aussi que je peux faire la même chose en mettant les images a la suite dans un même div, et en attribuant un CSS contenant des padding afin qu'elle soient espacées dans ce bloc.

Est-ce mieux ?

Bonsoir,

Digipen a écrit :

J'ai créer cet effet et je voudrais que la bande rouge, au lieu de se derouler vers le bas, se deroule vers le haut, c a dire quelle morde de x pixels sur l'image, en partant du bas de l'image.

Est ce plus clair ?

heu pas pour moi ...

Que cherche tu a avoir en finalité ?

Ton truc rouge qui remonte et mord l'image ça sert ou demontre quoi ? du texte dedans , genre légende, tarif, ... ?

Quel sont les contenus, et quel architecture html vas tu utiliser et tenter de styler ?

J'ai bien quelques idées avec :after(info:contenu generer par les feuille de style incompatible avec l'element img) et background-size par exemple, mais un javascript ne vaudrait-il pas mieux le coup ?

+1 pour gc-nomade : tu comptes mettre du contenu dans cette "bande rouge" ? Quelle est réellement la structure sémantique que tu comptes avoir ? Pars plutôt là-dessus avant de mettre des effets de transition, à mon avis.

Oui je vais en effet partir du debut mais je voulais juste tester un effet de ce type.

J'ai trouver un folio online qui a l'effet que je souhaite

http://www.soemone.com/

est ce realisable avec une seule classe que l'on applique a chaque image comprise dans le container ?

Bonjour, bonsoir

Peut-être un peu fastidieux a faire en css pure et ça ne sera pas cross-browser.

imagnons :

<div class="test" ><img src="monImage.png" alt="desc court" /><p>un tetxe qui joue a cache cache</p></div>
<img src="monImage.png" alt="desc court" /><p>un tetxe qui joue a cache cache</p></div>
<img src="monImage.png" alt="desc court" /><p>un tetxe qui joue a cache cache</p></div>
<img src="monImage.png" alt="desc court" /><p>un tetxe qui joue a cache cache</p></div>
<img src="monImage.png" alt="desc court" /><p>un tetxe qui joue a cache cache</p></div>

et pour le css :

.test {position:relative;display:inline-block;opacity:1;overflow:hidden;width:150px;height:150px;}
.test img {height:150px;}
.test p {background:white;text-align:center;opacity:0.85;position:absolute;top:-100px;left:0;width:150px;z-index:1;margin:0;}
.test:hover p {top:0;}
.test:hover {opacity:0.65;}
.test:hover p, .test p , .test:hover, .test {
-moz-transition : all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition : all 1s ease-in-out;
transition : all 1s ease-in-out;
}

Cela devrait marché dans FF4, Chrome, opera 10 et Safari, les autres , pas de transitions.

... reste a tester , mais ça devrait fonctionné. (note , tu peux regroupé les regles de transitions plutot que de les repeter sur chaque selecteurs)


Cordialement,
GC

Merci beaucoup pour ton aide et surtout ta patience pour expliquer aux débutants. Je vais essayer de me débrouiller avec ça dejà et voir le code m'aidera surement à mieux le comprendre et à progresser

PS : ca fonctionne
Modifié par Digipen (08 Dec 2010 - 22:38)