JSFiddle - React, Tailwind, and code Playground
HTML
<ul class='navigatie_meniu'>
<li>
<img src='../img/web/acasa_meniu.png' />
</li>
<li>
<img src='../img/web/inapoi_meniu.png' />
</li>
<li class='cos' active='0'>
<img src='../img/web/cos_meniu.png' style='z-index:100;' />
</li>
<li>190 lei</li>
<li></li>
</ul>
CSS
.cos {
background: linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
background: -o-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
background: -moz-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
background: -webkit-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
background: -ms-linear-gradient(bottom, rgb(161, 0, 3) 17%, rgb(115, 0, 2) 59%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(161, 0, 3)), color-stop(0.59, rgb(115, 0, 2)));
-moz-box-shadow: inset 0 10px 28px -2px #000;
-webkit-box-shadow: inset 0 10px 28px -2px #000;
box-shadow: inset 0 10px 28px -2px #000;
opacity: 0;
}
.cos_hover {
opacity: 1
}
JavaScript
setInterval(function () {
if ($(".cos").attr("active") == 0) {
$(".cos").toggleClass("cos_hover", 1000);
}
}, 2000);