Здравствуйте. Мне надо понять как сделать увеличение изображения при наведение. При этом оставив текст слева от изображения статичным
HTML :<!DOCTYPE html>
<html>
<head>
<title>Вертикальное меню</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="head">
<div class="ico"><a href="#"><img src="LOGO.png"></a></div>
</div>
</header>
<nav id="menuVertical">
<ul>
<li><a href="#1"><div class="img_n"><img src="earth.png"></div><span>1</span></a>
<ul>
<li><a href="#1-1">1</a></li>
<li><a href="#1-2">1</a></li>
<li><a href="#1-3">1</a></li>
</ul>
</li>
<li><a href="#2"><div class="img_n"><img src="stat.png"></div><span>2</span></a>
<ul>
<li><a href="#2-1">2</a></li>
<li><a href="#2-2">2</a></li>
<li><a href="#2-3">2</a></li>
<li><a href="#2-4">2</a></li>
</ul>
</li>
<li><a href="#3"><div class="img_n"><img src="prof.png"></div><span>3</span></a>
<ul>
<li><a href="#3-1">3</a></li>
<li><a href="#3-2">3</a></li>
<li><a href="vk.html">3</a></li>
<li><a href="#3-4">3</a></li>
</ul>
</li>
<li><a href="#4"><div class="img_n"><img src="zak.png"></div><span>4</span></a>
<ul>
<li><a href="#4-1">4</a></li>
<li><a href="#4-2">4</a></li>
<li><a href="#4-3">4</a></li>
</ul>
</li>
<li><a href="#5"><div class="img_n"><img src="door.png"></div><span>5</span></a>
<ul>
<li><a href="#5-1">5</a></li>
<li><a href="#5-2">5</a></li>
<li><a href="#5-3">5</a></li>
</ul>
</li>
<li><a href="#6"><div class="img_n"><img src="door.png"></div><span>6</span></a></li>
<li><a href="#7"><div class="img_n"><img src="door.png"></div><span>7</span></a></li>
<li><a href="#8"><div class="img_n"><img src="door.png"></div><span>8</span></a></li>
</ul>
</nav>
<div class="menu"><div class="footer">Copyright © 2019<br>
powered by <a href="#1"><font color="#9dacaa">Новости</font></a>
</div></div>
<div class="content">
<img width="400px" height="600px" src="fuka.png">
Генетические данные, fdsfsdfsdfdsafhbsdafsaifsadfdasfdasfsfsafwsfasfsfasfdsaполученные при анализе больших выборок из разных популяций, убедительно показали, что расхожее мнение о том, будто биологическая эволюция человека прекратилась, не более чем миф. Наша эволюция продолжается и сегодня. Это значит, что разные генетические варианты (аллели) по-разному влияют на эффективность передачи генов следующим поколениям, и поэтому частота встречаемости таких вариантов меняется от поколения к поколению. При этом биологическая эволюция современного человечества связана с его социально-культурной эволюцией и научно-техническим прогрессом, от которых зависит направленность отбора. Некоторые гены подвергались отбору у людей в различных экстремальных условиях в недавнем прошлом, но сегодня эти процессы уже не так актуальны. Среди
Генетические данные, fdsfsdfsdfdsafhbsdafsaifsadfdasfdasfsfsafwsfasfsfasfdsaполученные при анализе больших выборок из разных популяций, убедительно показали, что расхожее мнение о том, будто биологическая эволюция человека прекратилась, не более чем миф. Наша эволюция продолжается и сегодня. Это значит, что разные генетические варианты (аллели) по-разному влияют на эффективность передачи генов следующим поколениям, и поэтому частота встречаемости таких вариантов меняется от поколения к поколению. При этом биологическая эволюция современного человечества связана с его социально-культурной эволюцией и научно-техническим прогрессом, от которых зависит направленность отбора. Некоторые гены подвергались отбору у людей в различных экстремальных условиях в недавнем прошлом, но сегодня эти процессы уже не так актуальны. Среди
Генетические данные, fdsfsdfsdfdsafhbsdafsaifsadfdasfdasfsfsafwsfasfsfasfdsaполученные при анализе больших выборок из разных популяций, убедительно показали, что расхожее мнение о том, будто биологическая эволюция человека прекратилась, не более чем миф. Наша эволюция продолжается и сегодня. Это значит, что разные генетические варианты (аллели) по-разному влияют на эффективность передачи генов следующим поколениям, и поэтому частота встречаемости таких вариантов меняется от поколения к поколению. При этом биологическая эволюция современного человечества связана с его социально-культурной эволюцией и научно-техническим прогрессом, от которых зависит направленность отбора. Некоторые гены подвергались отбору у людей в различных экстремальных условиях в недавнем прошлом, но сегодня эти процессы уже не так актуальны. Среди
Генетические данные, fdsfsdfsdfdsafhbsdafsaifsadfdasfdasfsfsafwsfasfsfasfdsaполученные при анализе больших выборок из разных популяций, убедительно показали, что расхожее мнение о том, будто биологическая эволюция человека прекратилась, не более чем миф. Наша эволюция продолжается и сегодня. Это значит, что разные генетические варианты (аллели) по-разному влияют на эффективность передачи генов следующим поколениям, и поэтому частота встречаемости таких вариантов меняется от поколения к поколению. При этом биологическая эволюция современного человечества связана с его социально-культурной эволюцией и научно-техническим прогрессом, от которых зависит направленность отбора. Некоторые гены подвергались отбору у людей в различных экстремальных условиях в недавнем прошлом, но сегодня эти процессы уже не так актуальны. Среди
Генетические данные, fdsfsdfsdfdsafhbsdafsaifsadfdasfdasfsfsafwsfasfsfasfdsaполученные при анализе больших выборок из разных популяций, убедительно показали, что расхожее мнение о том, будто биологическая эволюция человека прекратилась, не более чем миф. Наша эволюция продолжается и сегодня. Это значит, что разные генетические варианты (аллели) по-разному влияют на эффективность передачи генов следующим поколениям, и поэтому частота встречаемости таких вариантов меняется от поколения к поколению. При этом биологическая эволюция современного человечества связана с его социально-культурной эволюцией и научно-техническим прогрессом, от которых зависит направленность отбора. Некоторые гены подвергались отбору у людей в различных экстремальных условиях в недавнем прошлом, но сегодня эти процессы уже не так актуальны. Среди
</div>
</body>
</html>
CSS : body{
background: #e0e3e5;
font-family: "Roboto", sans-serif, Helvetica, Arial;
margin: 0;
}
.head{
background-color: #FFE4E1;
min-height: 80px;
width: 100%;
margin: 0;
box-shadow: 0 1px 3px 0 #888;
position: fixed;
z-index: 10;
display: inline-flex;
}
.ico img{
height: 72px;
margin-top: 7px;
padding: 0 0 3 20px;
}
#menuVertical{
width: 71px;
height: auto;
position: fixed;
z-index: 5;
top: 79px;
transition: .3s;
}
#menuVertical ul{
display: block;
width: 54px;
height: auto;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#menuVertical ul li{
display: block;
width: 175px;
position: relative;
}
#menuVertical ul li a{
position: relative;
display: block;
width: 198px;
height: auto;
box-sizing: border-box;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
color: #000000;
line-height: 2em;
padding: 10px 15px;
background: rgb(255, 240, 245);
text-decoration: none;
text-shadow: 2px 2px 3px #222;
}
#menuVertical ul li a:hover,
#menuVertical ul li:hover a{
background: rgb(128, 128, 128);
color: #fff;
}
#menuVertical ul li ul{
position: absolute;
top: 0px;
left: 198px;
display: none;
width: auto;
}
#menuVertical ul li:hover ul{
display: block;
}
#menuVertical ul li ul li a{
white-space: nowrap;
text-transform: none;
padding: 10px 20px;
width: 153px;
}
#menuVertical ul li ul li a:hover{
background: rgb(128, 128, 128);
color: #fff;
}
.menu{
position: absolute;
width: 198px;
height: 100%;
background: rgb(255, 240, 245);
box-shadow: 1px 2px 3px #888;
position: fixed;
top: 79px;
z-index: 3;
}
.footer{
position: absolute;
width: 198px;
height: 88px;
bottom: -29px;
background: rgb(255, 240, 245);
margin-bottom: 78px;
z-index: 13;
border-top: 1px solid rgb(0, 0, 0);
color: rgb(0, 0, 0);
text-align: center;
padding-top: 22px;
}
.img_n{
transition: .3s;
}
.img_n:hover{
margin-left: 5px;
transition: .3s;
}
/*MEDIA*/
@media screen and (max-width: 1152px){
.menu{
width: 57px;
transition: .3s;
}
#menuVertical ul li a{
width: 57px;
transition: .3s;
}
#menuVertical ul li{
width: 57px;
}
#menuVertical ul li ul li a{
left: -141px;
}
span{
display: none;
}
.footer{
transform: rotate(-90deg);
left: -77px;
border-right: 1px solid rgb(9, 42, 51);
height: 24px;
bottom: 77px;
text-align: left;
padding-left: 11px;
padding-bottom: 25px;
padding-top: 6px;
}
.img_n img{
height: 40px;
margin-left: -7px;
margin-top: 9px;
}
}
@media screen and (min-width: 1152px){
.img_n img{
display: none;
}
}
.content {
padding: 90px 0 0 215px;
color: #000000;
font-size: 85%;
font-variant: small-caps;
text-indent: 5%;
}
img
{
float: right;
}
img:hover
{
border:1px solid #C0C0C0;
}
При выделением пикчи текст так же съезжает
img:hover
{
border:1px solid #C0C0C0;
}
Простой
Простой