@kolykisel

Как сделать что бы scale перекрывал border?

Есть разметка html:
<div class="diseases-box">
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
						<a href="#" class="disease-item">
							<div class="disease-item__content">
								<p class="disease-item__text">Межпозвоночных грыж всех отделов позвоночника</p>
								<p class="disease-item__view">Подробнее</p>
							</div>
						</a>
					</div>

Есть стили css
.diseases-box
	display: flex
	justify-content: center
	flex-wrap: wrap
	margin-top: 71px
.disease-item
	width: 390px
	height: 130px
	text-align: center
	display: flex
	justify-content: center
	align-items: center
	border-right: 1px solid #ebebeb
	border-bottom: 1px solid #ebebeb
	text-align: left
	transition: $transition
	&:hover
		box-shadow: 0 10px 80px -30px #aa9fb7
		transform: scale(1.03)
		transform-origin: 50% 0
		border: 0
	&:hover .disease-item__view
		height: auto
		margin-top: 20px
		transition: $transition
	&:hover .disease-item__text
		color: #000
	&__text
		width: 180px
		font-size: 18px
		color: #502382
	&__view
		font-size: 14px
		color: #502382
		height: 0
		overflow: hidden
		transition: $transition
		&::after
			content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' viewBox='0 0 7 10'%3e%3cpath fill='none' fill-rule='evenodd' stroke='%23502382' stroke-linecap='round' stroke-linejoin='round' d='M1 0l5 5-5 5'/%3e%3c/svg%3e")
			margin-left: 21px
			position: relative
			top: 1px

При наведении на каждый блок, почему почему то не перекрывает предыдущий border, подскажите куда капать, то уже что только не перепробовал, спасибо
Вот пример на codepen:
https://codepen.io/anon/pen/KOXmJa
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
background: сделай для .disease-item
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Screenager
@Screenager
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы