In the example below, I coded for 4 different scenarios.
I hope your problem will be solved this way. If you have any questions, write without hesitation.
Run Code Snippet:
var el;
document.addEventListener("click", function(event) {
el = event.target.closest('.coupon.onclick');
el && el.classList.toggle('active');
});
.coupon {
position: relative;
font-family: sans-serif;
display: inline-block;
cursor: pointer;
}
.coupon .code {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
border: 2px dashed green;
color: green;
font-weight: 500;
border-radius: 6px;
padding: 6px 8px;
user-select: all;
}
.coupon .mask {
position: relative;
z-index: 1;
background: green;
color: white;
border-radius: 6px;
padding: 6px 8px;
transition: .3s;
user-select: none;
}
.coupon.onhover:hover .mask,
.coupon.onclick.active .mask {
transform: translateX(-100%);
}
.coupon.onhover:hover .mask.bottom,
.coupon.onclick.active .mask.bottom {
transform: translateY(100%);
}
<h3>On Hover: Left Transform:</h3>
<div class="coupon onhover">
<div class="code">0AB9XOIJ</div>
<div class="mask">Coupon Code</div>
</div>
<h3>On Hover: Bottom Transform</h3>
<div class="coupon onhover">
<div class="code">0AB9XOIJ</div>
<div class="mask bottom">Coupon Code</div>
</div>
<h3>On Click: Left Transform</h3>
<div class="coupon onclick">
<div class="code">0AB9XOIJ</div>
<div class="mask">Coupon Code</div>
</div>
<h3>On Click: Bottom Transform</h3>
<div class="coupon onclick">
<div class="code">0AB9XOIJ</div>
<div class="mask bottom">Coupon Code</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…