border-radiusで角丸にした要素を拡大する
.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>