* {
	padding:0;
	margin:0;
}
:root {
	--s:200px;
	--o:5px;
	--f:1;
	--c1:#0edd23;
}
.content {
	margin:0 auto;
	width:var(--s);
	height:var(--s);
}
.content img {
	--shrink:calc((var(--s) / var(--f) - var(--s)) / 2 - var(--o));
	--bg:content-box no-repeat center/ calc(100% / var(--f)) 100%;
	width:var(--s);
	height:var(--s);
	outline:var(--o) solid var(--c1);
	cursor:pointer;
	outline-offset:var(--shrink);
	border-radius:0 0 var(--s) var(--s);
	transition:all .5s;
	padding-top:100px;
	background:radial-gradient(circle closest-side,#e4d396 calc(99% - var(--o)),var(--c1) calc(100% - var(--o)),var(--c1) 99%,transparent 100%
        )
        var(--bg);
	transform:scale(var(--f));
	-webkit-mask:linear-gradient(#000 0 0)
        no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 3 * var(--o)) 50%,radial-gradient(circle closest-side,#000 99%,transparent
        )
        var(--bg);
	-moz-mask:linear-gradient(#000 0 0)
        no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 3 * var(--o)) 50%,radial-gradient(circle closest-side,#000 99%,transparent
        )
        var(--bg);
}
.content img:hover {
	--f:1.35
}