html 边界半径で角丸にした要素を拡大する

Posted 2021-05-11

.zoom-image:hover {
	border-radius: 10px;
	.zoom-image-target {
		img {
			opacity: 0.75;
			transform: scale(1.15);
		}
	}
}

.zoom-image-target {
  border-radius: 10px;
  box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	position:relative;
	z-index:1;
	img {
    // transition
	}
}

<a href="#" class="zoom-image">
	<div class="zoom-image-target"><img src="hoge.jpg"></div>
</a>