JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<ul>
    <li id="home_sensors_li_temp">
        <h4>Temperature</h4>
        <div class="sensor_border"></div>
        <div class="sensors_icon"></div>
    </li>
</ul>

CSS

body {
    background:blue
}
.sensor_border {
    transform:translate(-50%,-50%);
    border:4px solid #fff;
    border-radius:50%;
    height:110px;
    margin:75px 73px;
    position:absolute;
    width:110px;
}
.sensors_icon {
    height:120px;
    width:120px;
}

JavaScript

$('.sensor_border').mouseenter(function () {
    $(this).stop(true).animate({
        height: 140,
        width: 140
    },{duration:200});
});
$('.sensor_border').mouseleave(function () {
    $(this).stop(true).animate({
        height: 120,
        width: 120
    },{duration:200});
});