Bonjour,

J'ai sur mon petit site ,qui commence à prendre forme (pour ceux qui suivent mes mésaventures !), un léger détail qui me dérange malgré tout !

J'ai plusieurs titres (h3 d'id REFi) dans ma page principale qui grossissent lorsque on passe la souris dessus avec la fonction scale() :

h3
{
    text-align: center;
    opacity: 1;
    font-family: latothin;
    font-size: 2em;
    transform: rotate(2deg);
    color: #ffffff;
    transition: 0.2s;
    font-style:normal;
    text-align:center;
    overflow:hidden;        /* overflow position 1 : marche pas */
}

h3:hover{
	transform: scale(1.2) rotate(2deg);
	cursor:zoom-in;
	overflow:hidden;     /*overflow position 2 : marche pas */
}

#REF1{
	background-color: #53629b;
}
#REF2{
	background-color: #77C4E4;
}
#REF3{
	background-color: #0E698F;
}

Le CSS (très beau n'est ce pas ?) et l'animation sont parfaits cependant la fonction scale fait dépasser le background de mes h3 de la page. A l'oeil nu ça ne change rien car ils dépassaient déjà à cause de l'inclinaison mais en bas de page on observe l'apparition d'une barre pour scroller horizontalement ... c'est laid et le pire dans l'histoire c'est qu'il est impossible de l'utiliser car il faut rester en hover sur le titre pour qu'elle apparaisse  ....

J'ai tenté d'enlever ça avec un overflow mais en vain ... (je n'y croyais pas du tout à vrai dire)

Je vous laisse essayer le code si vous ne voyez pas clairement ce que je veux dire.

-
Edité par Skytchup 15 mai 2018 à 16:25:19

Salut,

Tu pourrais nous donner le HTML aussi stp?

<div id ="centre" class="bcg_central">  
          
				<h3 id="REF1">TITRE 1</h3>  
				
            <section id= "paragraphe1">                    
				<p id="txt1" class="info_long">
					du texte long       
				</p>            
				<figure>                
					<img class="img_sat" src="/static/image1.jpeg">                
				</figure>                
            </section>
			
				<h3 id="REF2">TITRE 2</h3>  
          		
            <section id= "paragraphe2">
				<figure>                
					<img class="img_sat" src="/static/image2.jpeg">                
				</figure> 			
				<p id="txt2" class="info_long">
					du texte long            
				</p>                
            </section>	
			
				<h3 id="REF3">TITRE 3 </h3> 
				
            <section id= "paragraphe3">
                 <p id="txt3" class="info_long">
					du texte long					
				 </p>
				<figure>                
					<img class="img_sat" src="/static/image3.jpeg">                
				</figure> 				 
            </section>			
</div>

Si ça t'aide voici le html simplifié !

-
Edité par Skytchup 25 mai 2018 à 9:46:17

Bonjour,

C'est sur le parent qu'il te faut mettre le overflow:hidden:

#centre{
 overflow:hidden;
}

Une alternative possible est de mettre un width:90% sur tes h3; c'est presque mieux: l'effet en devient plus marqué. 

pas mal l'idée du width philiga, je vais prendre ça du coup car l'overflow est un peu étrange à gauche au final c'est vrai ...

Il n'y a pas moyen de mettre un overflow:hidden sur la droite uniquement ? Simple question, donc si ce n'est pas permis en css ne vous embêtez pas à essayer de me faire des script en js je ne l'utiliserai sans doute pas car j'ai pas envie de trop alourdir mes codes pour des petits détails comme ça.

Hello,

Une autre solution qui peut p'tet répondre à tes besoins. En gros tu retires la width correspondant au scale.

h3:hover{
  /* width:calc(100% - 8.5%); Inutile, j'avais pas fais gaffe ! */ width:91.5%;
}

A voir si ça fonctionne sur du responsive mais en tout cas, lorsque j'ai essayé sur 2 tailles différentes en survolant les h3, ils prennent toute la longueur et il n'y a pas de scrollbar.

Et non tu ne peux pas mettre de oveflow:hidden seulement sur la droite, par contre tu peux définir overflow-x pour l'axe horizontal et overflow-y pour l'axe vertical

-
Edité par Anonyme 17 mai 2018 à 8:31:45

@Ekyss: Esthétiquement, l'effet n'est pas terrible (saccadé et décalé) si tu mets le width:90%; (ou 91.5 si tu veux) au hover plutôt que permanent comme je le suggérais.

En outre, quel intérêt de passer par la fonction calc encore non supportée partout et parfaitement inutile puisque

width:calc(100% - 8.5%) sera toujours et partout strictement identique à width:91.5%;  ?

Cette fonction n'a lieu d'être que si tu déduis des pixels de pourcentages, mais ici, si c'est pour t'épargner à toi le calcul de 100 - 8.5 à faire une fois pour toutes, tu ne crois pas que tu abuses des ressources machines pour ne pas utiliser les tiennes, Ekyss...? 

-
Edité par philiga 17 mai 2018 à 8:17:33

Je lui proposais juste une solution alternative s'il ne voulait pas du overflow:hidden c'est sûrement pas moi qui utiliserait cette méthode pour le rendu qu'il recherche.

Effectivement j'avais pas fais gaffe à mon calc inutile aussi, vue l'heure où j'ai lu son post, ça peut se comprendre xD ! 
Du coup oui, s'il adopte cette méthode il peut virer le calc qui est bien inutile si on ne soustrait pas une valeur absolue à une valeur relative

-
Edité par Anonyme 17 mai 2018 à 8:28:35

On est d'accord...! 

Se passer du overflow:hidden; est déconseillé je pense parce que sans lui, l'ascenseur apparaît une fraction de seconde au hover in et out, donc pas terrible... (sauf, donc, si la réduction à 90% est permanente et l'on ne déborde alors jamais).

-
Edité par philiga 17 mai 2018 à 8:39:50