I designed four interactive boxes, where clicking or hovering on one box increases the padding or margin, causing it to overlap with the adjacent boxes.
I attempted the following CSS:
.marketing-service.active {
margin: 0;
}
and
.marketing-service.active:hover {
margin: 0;
}
However, both strategies failed to resolve the issue. To reproduce the problem, ensure that one box is on the second row and then click on the first box before hovering over it.
How can I maintain the original position of all boxes while eliminating the extra spacing caused by the down arrow?
$('#marketing-tab1').addClass('active');
$('#marketing1').show();
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To display service box
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500); */
$('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
});#marketing-services {
width: 80%;
margin: 0 10%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 2%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
.marketing-service-title {
font-size: 1.6em;
margin-bottom: 100px;
}
.marketing-img {
width: 125px;
height: 125px;
}
/*-- Down Arrow for boxes --*/
.marketing-service.active,
#marketing-tab1.active {
background: rgba(0, 255, 170, .4);
}
.marketing-service.active:after,
.marketing-service.active:before,
#marketing-tab1.active:after,
#marketing-tab1.active:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service.active:after,
#marketing-tab1.active:after {
border-width: 0px;
margin-left: 0px;
border-color: rgba(0, 255, 170, .4);
border-right-color: rgba(0, 255, 170, .4);
margin-top: -30px;
}
.marketing-service.active:before,
#marketing-tab1.active:before {
border-color: #FFF;
border-top-color: rgba(0, 255, 170, .4);
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">A</h2>
<img src="../images/marketing-seo.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">B</h2>
<img src="../images/marketing-ppc.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">C</h2>
<img src="../images/marketing-conversion.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">D</h2>
<img src="../images/marketing-email.png" class="marketing-img">
</div>
</div>
</div>