# 1. Effect drawing

<! DOCTYPE html> <html> <head> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <title> </title> <style>. height: 510px; background-color:#e0ebed;overflow: hidden; } .img{ width: 395px; height: 220px; overflow: hidden; } img.bigger { width: 100%; height: 100%; transition: transform 2s; } img:hover {transform: scale(1.2, 1.2); } .content strong{ font-size: 20px; } .content{ padding: 5px 10px; margin: 30px 10px; color:# 585858;
        }
        .content span{
            color: rgb(22,196,175);
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="img">
            <img class="bigger" src="Https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=375874604, & FM = 26 & gp = 0. 2583473491 JPG" alt="">
        </div>
       <div class="content"<p style= "max-width: 100%; clear: both; min-height: 1em"margin-bottom: 40px;"> Around the data accumulation of "people, vehicles, fields and services", combined with the advanced collection technology of IOT, using the way of Internet + big data, mining the market potential of smart parking, make smart parking become an important part of smart city, smart traffic... </p> <svg t="1585122467933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5894" width="32" height="32"><path d="M512 909.061224 218.906122 0-397.061224 - c - 178.155102-397.061224-397.061224 s178.155102 397.061224 397.061224 to 397.061224 397.061224 178.155102 397.061224 397.061224-178.155102 397.061224 397.061224z" fill="#16C4AF" p-id="5895"></path><path d="M660.897959 531.853061 h - 297.795918 - c - 10.971429-0-19.853061-8.881633-19.853061-19.853061 s8.881633-19.853061 19.853061 8.881633 19.853061 19.853061 19.853061 19.853061 h297.795918 c10.971429 0 s - 8.881633-19.853061-19.853061 19.853061 z" fill="#DCFFFA" p-id="5896"></path><path d="M512 680.75102 10.971429 0-19.853061 - c - 8.881633-19.853061-19.853061 v - 297.795918 - c0-10.971429-8.881633-19.853061 19.853061-19.853061s19.853061 8.881633 19.853061 19.853061v297.795918c0 10.971429-8.881633 19.853061-19.853061 19.853061 z" fill="#DCFFFA" p-id="5897"></path></svg>
            <span style="margin-left: 10px; margin-top: -5px; display: inline-block; vertical-align: text-top;">LEARM MORE</span>
        </div>
    </div>
    <script>
        $(function (param) { 
            $('.card').mouseover(function (param) { 
                $(this).find('.bigger').css({'transform':'scale (1.2, 1.2)'."transition-duration":'2s'});
                $(this).find('svg').css({'transform':'rotate(180deg)'."-webkit-transform":'rotate(180deg)'.'transition':'transform .5s'});
             });
             $('.card').mouseout(function (param) { 
                $(this).find('.bigger').css({'transform':'scale (1.0, 1.0)'."transition-duration":'2s'});
                $(this).find('svg').css({'transform':'rotate(0deg)'."-webkit-transform":'rotate(0deg)'.'transition':'transform .5s'});
             })
         })
    </script>
</body>
</html>

Copy the code