CODEWITHSUNDEEP
htmlcss
user3784723
user3784723

Reputation: 11

Hover effect in the image

I am attaching the image below ..Will any 1know how to give hover effect by css in this type of image

<a href="#top"><img class="popup1 img-1" src="assets/images/img-1.png" />

                </a>

image

hover like this

Upvotes: 0

Views: 1798

Answers (5)

Lae
Lae

Reputation: 942

What you want is to make a class to control the hover effect you want to add. This is done like so in CSS:

.classname:hover{
    /*css stuff here*/
}

The recommended approach would be to have a different image after the user hovers over your image like so:

.classname:hover{
    background-image: url('path to your image');
}

If you want to add an outline to the image then you can use drop-shadow, which is a quick-fix but I don't recommend, like so:

.classname:hover{
    -webkit-filter: drop-shadow(1px 1px 0 yellow)
                    drop-shadow(-1px -1px 0 yellow);
    filter: drop-shadow(1px 1px 0 yellow) 
            drop-shadow(-1px -1px 0 yellow);
}

Upvotes: 1

L Easton
L Easton

Reputation: 13

Here is an example of what you could do (just change the links to the area of your images and it should work.

JSFiddle

HTML

<a href="#top"><img class="popup1 img-1" src="https://i.sstatic.net/G9Sd7.png" />

                </a>

CSS

.popup1:hover {
  background-image: url(https://i.sstatic.net/D4EzQ.png)
}

Upvotes: 0

NoOorZ24
NoOorZ24

Reputation: 3222

This post has answer of how to make shadow for custom shape images, based on that you should be able to figure out how to make yellow shadow. Drop shadow for PNG image in CSS

Upvotes: 0

DopeAt
DopeAt

Reputation: 451

Lets say you have this html file: 

        <!DOCTYPE html>
       <html>
    <head>
    <style>
    .container {
        position: relative;
        width: 50%;
    }

    .image {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
    }

    .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%)
    }

    .container:hover .image {
      opacity: 0.3;
    }

    .container:hover .middle {
      opacity: 1;
    }

    .text {
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      padding: 16px 32px;
    }
    </style>
    </head>
    <body>

    <div class="container">
      <img src="http://combiboilersleeds.com/images/image/image-0.jpg" alt="" class="image" style="width:100%">
      <div class="middle">
        <div class="text">WOW Hover Effect</div>
      </div>
    </div>

    </body>
    </html>

Upvotes: 0

Edgar
Edgar

Reputation: 349

if you have the two images, why not replace on hover. Dunno if that is what you meant in the first place.

.my-class:hover {
   background-image: url('assets/images/img-2.png');
}

When you hover this will replace the imagine with the one you want.

Upvotes: 2

Related Questions