scss 背景画像をホバーで拡大！

Posted 2021-05-17

<div class="box_spa"> <a href="#77777"></a></div>

.box_spa {
	overflow: hidden;
	a {
		position: relative;
		display: block;
		width: 100%;
		height: 320px;
		&:after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url(../facilities/images/bg_spa01.jpg);
			background-size: cover;
			transition: all .4s ease-out;
			z-index: -1;
		}
		&:hover {
			&:after {
				opacity: .9;
				-ms-transform: scale(1.2);
				transform: scale(1.2);
			}
		}
	}
}