How to remove outline of hover image in html

Question

I'm trying to remove gray color outline of images. I saw that that outline means error because image tags don't have source properties. but if i add src="image.jpg", hovering doesn't work.

how to fix it? so confused....

this is my code

#item1 {
  background-image: url('cushion01.jpg');
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
#item1:hover {
  background-image: url('cushion-01.jpeg');
  height: 300px;
  width: 300px;
}

<div class="secondary__item" style="width: 100%; height : 850px;">
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item1"  src="image.jpg" />
    </li>
    <li class="item-image">
      <img class="item" id="item2" />
    </li>
  </ul>
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item3" />
    </li>
    <li class="item-image">
      <img class="item" id="item4" />
    </li>
  </ul>
</div>

There is a typo error in css. remove space before hover.. #item1:hover — Minal Chauhan, Nov 17 '16 at 12:49
And `` tag must hava a `src` attribute its better to use a `
` tag — jurruh, Nov 17 '16 at 12:54
possible of duplicate http://stackoverflow.com/questions/1073015/how-do-i-remove-the-gray-border-that-surrounds-background-images — prasanth, Nov 17 '16 at 12:58
solved! i changed image tag to div tag :D! i wanted to put some images so i used img tag. and it caused problem :0... thx for replies! — Yumin Hwang, Nov 18 '16 at 03:30

score 1 · Accepted Answer · answered Nov 17 '16 at 13:00

Strange thing is that you are trying to set background to <img> tag. If I were you I'd use <div> instead. Then It would be very simple:

HTML:

    <div class= "secondary__item" style="width: 100%; height : 850px;">
        <ul class="item-images">
        <li class="item-image"><div class="item"  id="item1" ></div></li>
            <li class="item-image"><div class="item"  id="item2" ></div></li>
        </ul>
        <ul class="item-images">
            <li class="item-image"><div class="item"  id="item3" ></div></li>
            <li class="item-image"><div class="item"  id="item4" ></div></li>
        </ul>
    </div>

CSS:

.item {
height:300px;
width :300px;
background-repeat: no-repeat;
background-size : cover;

/*you can remove it*/
border: 1px solid;
}
.item:hover {
background-image: url('http://shushi168.com/data/out/114/36276270-image.png');
height:300px;
width :300px;
}

Here is a Fiddle: https://jsfiddle.net/7kzu5qcy/2/

score 0 · Answer 2 · answered Nov 17 '16 at 12:49

0

Have you tried instead of using IDs to use the main identifier?

like...

.item-image IMG {
 border:none;
}

answered Nov 17 '16 at 12:49

Danny Carrington

1

Considering you're using this to set a background-image and no foreground image, why don't you simply change the IMG tags to DIVS instead, do the same job, and there's no placeholder border. – Danny Carrington Nov 17 '16 at 13:06

score 0 · Answer 3 · answered Nov 17 '16 at 12:58

0

Place this in your image tag

alt=""

answered Nov 17 '16 at 12:58

Thielicious

4,122
2
25
35

score 0 · Answer 4 · edited Nov 17 '16 at 21:22

0

Try this:

item1:hover {
    border: none !important;
    display: block;
}

edited Nov 17 '16 at 21:22

fourpastmidnight

4,032
1
35
48

answered Nov 17 '16 at 12:59

Pravin Vavadiya

3,195
1
17
34

score 0 · Answer 5 · answered Nov 17 '16 at 13:02

You can apply a simple hack using margin & overflow property of CSS.

Something like this:

/* Image Container (Parent) */
.item-image {
  width: 298px;
  height: 298px;
  overflow: hidden;
}

/* Image (Child) */    
.item-image img {
  margin: -1px;
  background: #eee; /* To show the area covered by image */
}

Have a look at the snippet below (I've applied background color to image to show the image area):

#item1 {
  background-image: url('cushion01.jpg');
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
#item1:hover {
  background-image: url('cushion-01.jpeg');
  height: 300px;
  width: 300px;
}

.item-image {
  width: 298px;
  height: 298px;
  overflow: hidden;
}

.item-image img {
  margin: -1px;
  background: #eee;
}

<div class="secondary__item" style="width: 100%; height : 850px;">
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item1"  src="image.jpg" />
    </li>
    <li class="item-image">
      <img class="item" id="item2" />
    </li>
  </ul>
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item3" />
    </li>
    <li class="item-image">
      <img class="item" id="item4" />
    </li>
  </ul>
</div>

Hope this helps!

score 0 · Answer 6 · edited May 23 '17 at 10:32

0

I see the answer to this is given in chrome/safari display border around image.

The reason cited is <img> tag does not have proper value in src attribute.

edited May 23 '17 at 10:32

Community

1
1

answered Nov 17 '16 at 13:10

Manish Sharma

1
2

How to remove outline of hover image in html

6 Answers6