JSFiddle - React, Tailwind, and code Playground

by Antkaz

HTML

<div class="bx-filter-parameters-box-antfas title-antfas">
											<div class="bx-filter-parameters-box-title-antfas" onclick="smartFilter.hideFilterProps(this)">
							<span class="bx-filter-parameters-box-hint">Торговая марка																<i class="fa fa-angle-down"></i>
							</span>
						</div>			
						<div class="bx-filter-block box-hover-antfas hover-box" data-role="bx_filter_block">
							<div class="row bx-filter-parameters-box-container-antfas">
																<div class="col-xs-12 antfas-box-posit">
																					<div class="checkbox">
												<label data-role="label_arrFilter_54_2110006494" class="bx-filter-param-label " for="arrFilter_54_2110006494">
													<span class="bx-filter-input-checkbox">
														<input value="Y" name="arrFilter_54_2110006494" id="arrFilter_54_2110006494" onclick="smartFilter.click(this)" type="checkbox">
														<span class="bx-filter-param-text" title="Pretty One">Pretty One&nbsp;(<span data-role="count_arrFilter_54_2110006494">3</span>)</span>
													</span>
												</label>
											</div>
																			</div>
														</div>										
			<div class="row">
				<div class="col-xs-12 bx-filter-button-box box-botttom-antfas">
					<div class="bx-filter-block">
						<div class="bx-filter-parameters-box-container">
							<input class="btn btn-themes" id="set_filter" name="set_filter" value="Показать" type="submit">
							<input class="btn btn-link" id="del_filter" name="del_filter" value="Сбросить" type="submit">
						</div>
					</div>
				</div>
			</div>
								<div style="clear: both"></div>
						</div>
					</div>

CSS

.image.first,.image.second {
border: 2px solid transparent;
margin: 0;
padding: 0;
width: 178px;
height: 274px;
background-size: contain;
background-position: center;
overflow: hidden;
background-repeat: no-repeat;
}

.image.first,.image.second {
opacity:1px;
display:block;
position:absolute;
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}
div.ImgField .image{
	background-position: center;
}
.image.first.hidden:hover {
transition-duration:0.96s;
-webkit-transition-duration:0.96s;
-moz-transition-duration:0.96s;
-o-transition-duration:0.96s;
-ms-transition-duration:0.96s;
}
 
div.ImgField {
display:inline-block;
background-position:center center;
background-repeat:no-repeat;
margin:0;
padding: 0 0 0 11px;
width: 202px;
height: 235px;
}

#sticker-popup-title{
	position: fixed;
	display: block;
	width: 680px;
	background: #fff;
	margin-top: -11px;
	z-index: 999;
}
.box-content-popup-margin-top-antfas {
	display: block;
	margin-top: 55px;
}

.hr {
	position: relative;
	margin-left: -10px;
	border-bottom: 1px solid #e3e3e3;
	margin-top: 20px;
}
.bottom-fixet-popup-antfas {
    padding-right: 19px;
}
.box-border-s {
	height: 35px;
}
.title-catalog-top-antfas {
	font-size: 25px;
	margin-bottom: 10px;
	margin-left: 12px;
}


.product-item-title-antfas a{
	color: #3f3f3f;
	text-decoration: none;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
	display: block;			
}
.product-item-title-antfas a:hover {
    color: #BC4A84;
    text-decoration: none;
}
.box-block-cart-antfas {
	width: 234px;
	height: 440px;
}

.catalog-top-antfas {
	width: 940px;
    float: right;
}
.img-cart-top-antfas img {
	width: auto;
	height: 235px;
	margin: 0 auto;
	display: block;
}
.box-title-antfas {
	display: block;
	text-align: center;
}
.box-prices-antfas {
	display: block;
	text-align: center;
}
.catalog-price-antfas {
	color: #000;
	font-weight: bold;
	white-space:...

JavaScript

$(document).ready(function() {
	$(".button span").click(function() {
	  $('.hover-box').toggle();
	});
	$(document).on('click', function(e) {
	  if (!$(e.target).closest(".title-antfas").length) {
		$('.hover-box').hide();
	  }
	 
	  e.stopPropagation();
	});	
	
	
	


	
});