Yumin Hwang Yumin Hwang - 22 days ago 5
CSS Question

How to remove outline of hover image in html

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>




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/