0

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

user3784723
  • 11
  • 1
  • 8
  • 1
    what do you mean by "hover effect?" – NoOorZ24 Apr 18 '17 at 13:02
  • The only hover effect I see is a yellow border? – Waxi Apr 18 '17 at 13:03
  • You cant style an 'actual image' with CSS. Make it such a way that when you hover you show the image with the outlined border. You can only add borders around the image, which is allways an square in HTML. CSS is not photoshop ;) – Red Apr 18 '17 at 13:05
  • Yes i want yellow border on the image when hover @waxi – user3784723 Apr 18 '17 at 13:10
  • that's what i am asking that hot to style actual image with css @Richard Mauritz – user3784723 Apr 18 '17 at 13:11
  • If you don't want to use two images. Then maybe you can do it in Illustrator or Sketch, export it as a SVG, fill the path with an image, then drop shadow from SVG. Is more complicated then meets the eye. – andreim Apr 18 '17 at 13:13
  • `drop-shadow` is the only solution i know off to make that possible. See awnser from @lae – Red Apr 18 '17 at 13:14

5 Answers5

2

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.

Edgar
  • 339
  • 1
  • 2
  • 10
  • Actually i have almsot 100's of images and its impossible to create 2 images for every picture that's why i want it by css – user3784723 Apr 18 '17 at 13:08
  • It'd be preferable to put image of border on top of picture and to change from empty image to border on :hover, so you would save up data usage – NoOorZ24 Apr 18 '17 at 13:08
  • @user3784723 if they all have the same shape then my answer above works – NoOorZ24 Apr 18 '17 at 13:09
1

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);
}
Lae
  • 832
  • 1
  • 13
  • 34
0

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>
DopeAt
  • 451
  • 3
  • 15
0

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

Community
  • 1
  • 1
NoOorZ24
  • 2,914
  • 1
  • 14
  • 33
0

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.stack.imgur.com/G9Sd7.png" />

                </a>

CSS

.popup1:hover {
  background-image: url(https://i.stack.imgur.com/D4EzQ.png)
}
L Easton
  • 13
  • 6