How to remove the outline of the floating image in html

advertisements

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>

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/