Как развернуть div из иконки - PullRequest
Новая
       10

Как развернуть div из иконки

1 голос
/ 04 марта 2020

У меня есть div с вложенной иконкой и другим скрытым текстом 

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

Начальный размер div равен значку, и когда иконка зависла, промежутки должны быть видны, а div должен разверните, чтобы соответствовать размеру содержимого.

div scheme

Область наведения не определена другим div, она определяется размером содержимого внутри div

Я знаю, как это сделать, проблема состоит в том, чтобы оживить расширение div.

РЕДАКТИРОВАТЬ: Я НЕ ИМЕЮ НИКАКИХ ЦЕННОСТЕЙ ДЛЯ РАЗМЕРОВ DIV ENDING

РЕДАКТИРОВАТЬ 2: ЗДЕСЬ СНИПЕТ, КОТОРЫЙ ВСЕ ЖДЕТ 

: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;
}
<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>

Ответы [ 3 ]

0 голосов
/ 04 марта 2020

Мне удалось воссоздать то, что вы просите, используя некоторые другие свойства CSS, переведя свойство max-width CSS: 

<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>

.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;
}

JSFiddle

0 голосов
/ 04 марта 2020 
div {
  width: 100px;
  height: 100px;
  background: red;
 transition: width 2s, height 2s;
}

div:hover {
  display: inline;
  width: 300px;
  height: 300px;
}
0 голосов
/ 04 марта 2020

Я думаю, вы могли бы достичь этого с помощью базовых c CSS переходов. См. этот пример.

что-то вроде этого 

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%;
}
<!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>
...