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 

```css
#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;
}
```

```html
<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>
```

Answer: 
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/>
Place this in your image tag

```
alt=""

```