Question 253869 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to Draw inspo hover effect in JS or in css

How to Drawing spots effect on image which highlights the elements on image on hover on spots and also need to show a line which connected with element after hover on different spots show on image.

enter image description here

Tags:

2

Answers


  1. 0

    First thing is to add a coords on image by using area tag in a map.
    The area tag defines an area inside an image map. Area elements are always nested inside a map tag.
    Visit link: area

    If you not satisfy with this solution then second option is to use transform in css and also add some js for proper solution. also clarify if you need something like this: video link

    Login or Signup to reply.
  2. 0 
    .dome {
                background: url(https://www.zdnet.com/a/img/resize/ba1b1ab92085d777ab5e313b34c66a94b7aa1236/2023/06/05/79a43eb8-ce38-488c-8cc0-e04699aaca7f/bing.jpg?auto=webp&width=1280);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                height: 200px;
                width: 200px;
                margin: 0 auto;
                
        }
        .dome > .dome-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
/*          overflow: hidden;*/
            position: relative;
            cursor: pointer;
            animation: pulses 2s infinite;
        }
        .dome > .dome-icon > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: 1;
            position: inherit;
            transition: .5s;
        }
        .dome > .dome-icon:hover > img {
            scale: 1.2;
        }
        .dome > .dome-icon:hover:after{
            opacity: 1;
            width: 210px;
            
        }
        .dome > .dome-icon:after {
            content: '';
            position: absolute;
            height: 2px;
            background: #ffd503;
            opacity: 0;
            
        }
        
        

        .dome > .dome-icon:nth-child(1):after,
        .dome > .dome-icon:nth-child(2):after{
            left: 42px;
        }

        .dome > .dome-icon:nth-child(1) {
            transform: translate(-113px, 61px);
        }
        .dome > .dome-icon:nth-child(2) {
            transform: translate(-120px, 132px);
        }

        .dome > .dome-icon:nth-child(1):after {
            top: 50%;
        }
        .dome > .dome-icon:nth-child(2):after {
            rotate: -10deg;
            top: 0;
        }
    <div class="dome">
    <div class="dome-icon"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"></div>
    <div class="dome-icon"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search