28172 sujets

CSS et mise en forme, CSS3

Hover sur une article - apparition bouton + opacité

Bonjour tout le monde je bloque sur l'apparition au hover d'une opacité et d'un bouton.

Des images vont parler d'elle même :

upload/60568-Capturedan.png
upload/60568-hover.png

Voici donc mon article :

Au hover, je voudrais que le bouton Read More soit affiché au premier plan, devant le bloc ou est appliqué une opacité...

Quelqu'un aurait la solution pour m'aider Smiley smile

Voici mon code :

HTML :

<article>
	<span>Read More</span>
	<img src="images/prj-1.jpg" alt="Lorem website">
	<h3>Lorem website</h3>
	<p>Lorem ipsum dolor sit amet. Consectetur adipisicing elit.	Distinctio, dolorem.</p>
</article>


CSS :
.work article{
	float: left;
	width: 250px;
	height: 250px;
	background-color: #f4f4f4;
	border-bottom: 3px solid #a65579;
	margin-left: 30px;
	margin-right: 10px;
	margin-top: 30px;
	margin-bottom: 60px;
}

.work article p {
	width: 210px;
	margin: 15px auto;
	color: #343434;
}

.work h3{
	text-align: center;
	color: #343434;
}

span{
	display: none;
	z-index: 99999;
}

.work article:hover span{
	display: inline;
	position: absolute;
	padding: 5px 10px;
	color: white;
	background-color: #a65579;
	margin-top: 120px;
	margin-left: 75px;
}

.work article:hover {
	transition: 0.7s;
	opacity: 0.5;
	cursor: pointer;
	z-index: 1;
}


Merci beaucoup ! Smiley smile

Robin
Modifié par Royo (25 Nov 2015 - 11:39)
Modérateur
Salut,

Le problème est que tu mets une opacité sur le parent du bouton. Donc aucune chance pour le bouton de s'en dégager. Quelques pistes :

- Mettre une opacité directement sur les éléments de l'article (sauf le bouton) plutôt que sur le conteneur
.work article:hover h3,
.work article:hover p,
.work article:hover img{
	opacity: 0.5;
}

- faire un faux transparent c'est a dire mettre un bloc avec un fond blanc transparent qui recouvre ton article juste en dessous du bouton (et au dessus de l'article). Tu peux le faire en rajoutant une div que tu fera apparaitre en meme temps que le bouton, avec un ::before ou un ::after sur le bouton (à vérifier) ou bien en mettant un box-shadow blanc transparent assez immense sur ton bouton (et en mettant un overflow:hidden; sur l'article)

C'est ce qui me vient a l'esprit... y'a peut etre (certainement) d'autres moyens...

bon courage ! Smiley murf
Modifié par _laurent (25 Nov 2015 - 11:54)
La propriété opacity s'applique au contenu et à tous les éléments enfants de l'élément auquel elle est appliquée.

Cette propriété devrait être supprimée. Au lieu d'opacity, tu peux utiliser un background-color avec des couleurs RGBA ou HSLA, qui ne s'applique pas au contenu et à tous les éléments enfants de l'élément auquel ce background-color est affiché.

J'espère avoir bien compris ton problème.
@thierry> je pense qu'il souhaite appliquer une opacité sur l'ensemble de l'article tout en préservant le "Read more" d'en hériter. Donc à priori, les RGBA ne répondent pas à cela (sauf si j'ai mal interprété la question...).

On peut aussi, dans la logique de _laurent passer par :not

.work article:hover>:not(:first-child) {opacity: .5}


Par contre pourquoi mettre un <span> pour ce qui semble être un lien ?
Sujet clos
Aller à