1
votes

Comment développer un div à partir d'une icône

J'ai un div avec une icône imbriquée et un autre texte caché

<nav class="contact-menu centered">
	<div class="contact-menu-wrapper">
		<div class="contact-menu-item">
			<div class="contact-menu-call-box">
				<a href="tel:1234567890">123 456 7890</a>
				<a href="tel:0987654321">098 765 4321</a>
				<img class="contact-menu-img" src="http://vivoda.ga/img/icons/phone.svg" />
			</div>
		</div>
		<div class="contact-menu-item">
			<img class="contact-menu-img" src="http://vivoda.ga/img/icons/mail.svg" />
		</div>
		<div class="contact-menu-item">
			<img class="contact-menu-img" src="http://vivoda.ga/img/icons/location.svg" />
		</div>
	</div>
</nav>

La taille initiale du div est égale à l'icône et lorsque l'icône est survolée, les étendues doivent être visibles et le div doit se développer pour s'adapter à la taille du contenu.

La zone de survol n'est pas définie par un autre div, elle est définie par le taille du contenu à l'intérieur du div

Je sais comment faire ça, le problème est d'animer l'élargissement du div.

EDIT: JE N'AI AUCUNE VALEUR POUR LE DIMENSIONS DE FIN DE DIV

EDIT 2: VOICI LE SNIPPET QUE TOUT LE MONDE ATTENDRA

:root {
	--nero: #1C0904;
	--marrone: #843A26;
	--arancione: #F25B1A;
	--giallo: #F49F0A;
	--bianco: #F2F2F2;
	
	--icon-size: 36px;
}

.home-section {
	width: 100%;
	height: 100vh;
}

.home-section h1 {
	text-align: center;
	margin-bottom: 30px;
}

.centered {
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 20px;
}

.contact-menu-wrapper {
	padding-right: 12px;
}

.contact-menu-img {
	height: var(--icon-size);
	float: right;
	cursor: pointer;
}

.contact-menu-item {
	margin: 20px 0;
	overflow: auto;
}

.contact-menu-call-box {
	width: var(--icon-size);
	height: var(--icon-size);
	border-radius: calc(var(--icon-size) / 2);
	background: var(--marrone);
	float: right;
	position: relative;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
	transition: .5s;
}

.contact-menu-call-box a {
	width: 0;
	height: 0;
	opacity: 1;
	display: block;
	color: var(--bianco);
	white-space: nowrap;
	transition: .5s;
}

.contact-menu-call-box:hover {
	width: 100%;
	height: 100%;
	padding-right: var(--icon-size);
	transition: .5s;
}

.contact-menu-call-box:hover a {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: .5s;
}

.contact-menu-call-box img {
	position: absolute;
	bottom: 0;
	right: 0;
}

<div>
    <span class="hidden">Lorem Ipsum</span>
    <span class="hidden">Dolor Sit Amet</span>
    <img src="icon.svg" />
</div>

html css animation css-transitions

4 commentaires

Pouvez-vous montrer un peu plus de votre code, Simone?

C'est un site Web entier et il y a beaucoup de classes uniquement pour cette partie du site. Mais, si vous le souhaitez vraiment, voici le github repo .

@isherwood J'ai essayé de le minimiser mais il ne semble pas agir de la même manière que le site Web.

@isherwood j'ai mis à jour avec l'extrait

3 Réponses :

0
votes

Je pense que vous pourriez y parvenir avec des transitions CSS de base. Voir cet exemple .

quelque chose comme ça

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div>
<section>
</section>
</div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

div {
  width: 100px;
  height: 100px;
  background: red;
  
}

section{
background: black;
width: 50px;
height: 50px;
transition: width 2s, height 2s;}

section:hover {
  width: 100%;
  height: 100%;
}

5 commentaires

Je les utilise déjà, mais la largeur fonctionne alors que la hauteur n'est pas affectée par l'animation.

Voir ma réponse mise à jour pour une explication complète de la façon de faire la hauteur et la largeur.

Merci d'avoir été si gentil, mais ce que je demande, c'est que j'ai une largeur et une hauteur initiales et que j'anime à 100% du contenu intérieur, pas de valeurs spécifiées.

Je vois, d'accord, je l'ai mis à jour à nouveau. Je pense que c'est plus ce que vous demandez?

Évidemment, je n'étais pas totalement clair. Je n'ai pas de boîte qui étend le div à, mais j'ai le div et du contenu, lorsque je passe la souris sur l'icône, le contenu doit être visible et le div doit être redimensionné pour s'adapter au contenu interne et non à la taille du icône plus (voir le dessin dans la question).

0
votes

J'ai pu recréer ce que vous demandez en utilisant d'autres propriétés CSS, en transférant la propriété CSS max-width :

.hidden {
    display: inline-block;
    max-width: 0px;
    overflow: hidden;
    transition: 1s;
}

div.container:hover .hidden {
    max-width: 100%;
}

div.container {
    display: inline-block;
    border: 1px solid gray;
}

<div class="container">
    <span class="hidden">Lorem Ipsum</span>
    <span class="hidden">Dolor Sit Amet</span>
    <img src="https://i.stack.imgur.com/GKbCl.png" />
</div>

5 commentaires

Si vous lisiez un peu mieux, vous auriez compris que je sais faire ça et ce avec quoi je lutte, ce sont les transitions.

Désolé pour ça. Je n'ai pas vu cette dernière phrase. J'ai mis à jour ma réponse. Devrait fonctionner maintenant.

Bonne idée d'étendre les éléments internes au lieu de l'extérieur, mais je ne sais pas pourquoi cela ne fonctionne pas sur mon site Web

Assurez-vous que les éléments .hidden sont affichés en tant que inline-block , ainsi que le div qui les contient.

Vous devez partager quelque chose. Il n'y a aucun moyen de savoir quelle est l'erreur à moins que vous ne nous donniez quelque chose de votre code.

0
votes

div {
  width: 100px;
  height: 100px;
  background: red;
 transition: width 2s, height 2s;
}

div:hover {
  display: inline;
  width: 300px;
  height: 300px;
}

0 commentaires