Проблемы с модальным окном CSS

283

04 апреля 2017, 09:48

Добрый вечер, У меня есть такая проблема, при нажатии на кнопку которая появляется при hover ел-та родителя вылазит модальное окно, а после его закрытия слетают дефолтные стили и скрытые эл-ты влазят в сетку и смещают контент. В чем может быть проблема, не могу понять как нажатие на кнопку сбивает стили?

.item 
	position: relative 
	overflow: hidden 
	text-align: center 
	cursor: pointer 
	+mt(.5) 
	&__img 
		position: relative 
		display: block 
		min-height: 100% 
		max-width: 100% 
		opacity: 0.9 
	&__content 
		color: #fff 
		font-size: 1.25em 
		-webkit-backface-visibility: hidden 
		backface-visibility: hidden 
		position: absolute 
		width: 100% 
		height: 100% 
		top: auto 
		bottom: 0 
		padding: 1em 
		height: 3.75em 
		background: white 
		color: $accent 
		+mt(.5) 
		-webkit-transform: translate3d(0, 100%, 0) 
		transform: translate3d(0, 100%, 0) 
		&:before 
			pointer-events: none 
		&:after 
			pointer-events: none 
	&:hover 
		.item__img 
			opacity: 0.3 
		.content__text 
			opacity: 1 
		.item__content, .content__header, .content__button 
			-webkit-transform: translate3d(0, 0%, 0) 
			transform: translate3d(0, 0%, 0) 
			opacity: 1 
			+mt(.5) 
		.content__header 
			-webkit-transition-delay: 0.05s 
			transition-delay: 0.05s 
		.content__button 
			-webkit-transition-delay: 0.10s 
			transition-delay: 0.10s 
 
 
.content__header, .content__button 
		+mt(.5) 
		-webkit-transform: translate3d(0, 200%, 0) 
		transform: translate3d(0, 200%, 0) 
 
.content 
	&__header 
		display: inline-block 
		float: left 
	&__button 
		background-color: $accent 
		color: #fff 
		padding: 5px 10px 
		border: 1px solid $accent 
		font-size: 12px 
		display: inline-block 
		cursor: pointer 
		+mt(.7) 
		text-decoration: none 
		opacity: 0 
		float: right 
		text-transform: uppercase 
		&:hover 
			text-decoration: none 
			color: $accent !important 
			background-color: #fff 
 
		&:active 
			.item__content 
				-webkit-transform: translate3d(0, 100%, 0) 
				transform: translate3d(0, 100%, 0) 
 
	&__text 
		position: absolute 
		bottom: 5em 
		padding: 2em 
		color: #fff 
		text-transform: none 
		font-size: 90% 
		opacity: 0 
		-webkit-transition: opacity 0.35s 
		transition: opacity 0.35s 
		-webkit-backface-visibility: hidden

.col-md-3.col-sm-6.col-xs-6.portfolio__item.mix.category-2 
	.item 
		img.item__img(src="../img/gallery_img/mine.jpg", alt="kolba") 
		.item__content 
			h3.content__header Заголовок 
			p.content__text   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda maxime, nostrum animi. Architecto consequuntur ut est, voluptatem hic debitis. Sit possimus, ullam deserunt magni sint saepe dolorem nisi. Tempora, minus. 
			a(href='#').content__button.popup__content Посмотреть