@lylech/react-image-magnifier/src/lfc-magnifier.css

An image magnifier complete with thumbnail ribbon. Lightweight yet customizable.

/*Container element - React context*/
.react-image-magnifier{
	min-width: 320px;
	width: 60vw;
	height: 80vh;
	display: flex;
	justify-content: center;

	align-items: center;
	border: 1px solid gray;
	border-radius: 4px;
}

/*Container element - JS context*/
div.lfc-rim-main{
	width: 100%;
	height: 100%;
	display: block;
}

/*Product Pane*/
div.lfc-rim-product{
	width: 100%;
	height: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}

/* Image element in Product Pane*/
img.lfc-rim-product-img{
	height: 0;
	width: 0;
	position: relative;
}

@keyframes lfc-mag-kf-anim-scaleup {
	from {scale: 33%;/*transform: rotate(0deg);*/}
	to {scale: 100%;/*transform: rotate(360deg)*/}
}

 /* Class selected is applied when new thumbnail is selected*/
 .lfc-rim-product.selected img{
	animation: lfc-mag-kf-anim-scaleup 0.1s;
}

/*Thumbnails container*/
div.lfc-rim-thumbnails{
	width: 100%;
	height: 20%;

	display: flex;
	justify-content: center;
	flex-direction: row;
}

/*Thumbnail*/
span.lfc-rim-thumbnail-outer{
	position: relative;
	width: 100%;
	height: 100%;
}

div.lfc-rim-thumbnail{
	position: relative;
	width: 100%;
	height: 100%;
	margin-right: 1px;
	border: 1px solid #AAA;
	border-radius: 4px;

	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	/* transform-origin: 100px;
	transform: rotate(calc(90deg*var(--i))); */

}

/*Currently selected Thumbnail */
span.lfc-rim-thumbnail-outer.active div.lfc-rim-thumbnail{
	border: 4px solid gold;
	background-color:  silver;
	border-radius: 8px;
	scale:1.1 1.1;
	transition: scale 0.5s;
	z-index: 1;
	cursor: default;
}

/*Hover over Thumbnail,  */
.lfc-rim-thumbnail:hover{
	border: 4px solid goldenrod;
	background-color: #6F3232;
	border-radius: 30%;
	scale:1.3;
	z-index: 2;
	cursor: pointer;
}

/* +++ Thumbnail Ribbon positioning +++ */
.ribbon-top .lfc-rim-main{
	display: flex;
	flex-flow: column-reverse;
}

.ribbon-left .lfc-rim-main{
	display: flex;
	flex-direction: row-reverse;
}

.ribbon-right .lfc-rim-main{
	display: flex;
	flex-direction: row;
}

.ribbon-hide div.lfc-rim-main div.lfc-rim-product{
	width: 100%;
	height: 100%;
}

.ribbon-hide div.lfc-rim-main div.lfc-rim-thumbnails{
	display: none;
}

.ribbon-left div.lfc-rim-main div.lfc-rim-product,
.ribbon-right div.lfc-rim-main div.lfc-rim-product{
	width: 80%;
	height: 100%;
}
.ribbon-left div.lfc-rim-main div.lfc-rim-thumbnails,
.ribbon-right div.lfc-rim-main div.lfc-rim-thumbnails{
	width: 20%;
	height: 100%;

	display: flex;
	flex-direction: column;
}
/* --- Thumbnail Ribbon positioning --- */

/* +++ Previous/Next Buttons +++ */
button.rim-button{
    border-radius: 8px;
    padding: 0.5rem 1rem 0.5rem 1rem;
	cursor: pointer;
}

button.rim-button:hover{
	/* scale: 1.2; */
	background-color: #DCDCDC;
	/* font-weight: 600; */
}

button.lfc-rim-btn-prev{
	width: 10%;
	height: 100%;
	position: absolute;
	left: 0;
	z-index: 1;
	opacity: .5;
	cursor: pointer;
}
button.lfc-rim-btn-next{
	width: 10%;
	height: 100%;
	position: absolute;
	right: 0;
	z-index: 1;
	opacity: .5;
	cursor: pointer;
}

/* --- Previous/Next Buttons --- */