Итак, в моем HTML я хочу, чтобы div выбора увеличивался при наведении курсора на него на 10 пикселей. Я также не хочу, чтобы позиции div не менялись, и не менялся его центр.
.choice {
width: 100%;
height: 80px;
text-align: left;
}
div.choice-div {
border-radius: 10px;
}
div.choice-div:hover {
width: 105%;
height: 100px;
}
.choice-text {
font-size: 30px;
vertical-align: middle;
}
.icon {
vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>
<div class="problem container">
<h1>What is 1 + 1?</h1>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
</div>
<div class="list-group-item bg-light mt-3 choice-div">
<span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
</div>
</div>
Есть идеи, как я могу это сделать?