当鼠标经过时如何突出显示图像？

Question

I would like highlight an image when button passed over, and then when i clicked over it, the site show me a sort of pop up. Like in this photo. I checked the code of the page but the result is different.

<div th:each="photo : ${photos}" class="col-md-6 col-lg-4">
    <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
        <div class="portfolio-item-caption-content text-center text-white">
            <i class="fas fa-plus fa-3x"></i>
        </div>
    </div>
    <img class="img-fluid" th:src="${photo.path}" alt="IMage">

Answer 1

There is a W3schools tutorial on this explaining how to do it properly " https://www.w3schools.com/howto/howto_css_image_overlay.asp ". For the pop-up I would suggest a modal using bootstrap.