JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<ul style="list-style-type: none;">
                    <li>
                        <div> 
                        <img src="images/fleet_vehciles/sf56omm_high_volume_jetvac.jpg"/>
                        </div>
                    </li>

                    <li>
                        <img src="images/fleet_vehciles/sc62lco_low_volume_jetvac_rioned.jpg"/>
                    </li>

                    <li>
                        <img src="images/fleet_vehciles/sa08ff0_support_van.jpg" />
                    </li>

                    <li>
                        <img src="images/fleet_vehciles/mx58lxc_cctv_van.jpg" />
                    </li>
                </ul>
<div class="ih-info">Div to hover</div>

JavaScript

$(function(){
            $('.li').hover(
              // Over
            function(){
                var $ih = $(this);
                $('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
            },
            // Out
            function(){
                var $ih = $(this);
                $('.ih-info').stop(true,true).animate({opacity:0}, 400);
            }
        ).find('.ih-info').css('opacity',0);
    });