CODEWITHSUNDEEP
cssimagebrowser
lavelle
lavelle

Reputation: 1546

Images being set to hidden on web server

I have a website which includes 3 images in img tags. When i open the local html file, everything is fine. However, when i upload to my server, the page is identical, apart from the images not being visible. If i use Chrome's web inspector, i can see that

style="display: none; visibility: hidden; "

has been added by the browser. if i uncheck these stylings the image still are not visible. I've tried it on two totally separate web hosts.

Firefox does not add the rules, but they still aren't visible.

My code (before browser interferes)

<div class="grid_12" id="adswrap">
            <h2>Adverts</h2>
            <div class="grid_3 ads"><img src="images/ads/1.jpg" /></div>
            <div class="grid_3 ads"><img src="images/ads/2.jpg" /></div>
            <div class="grid_3 ads"><img src="images/ads/3.jpg" /></div>
</div>

and the styling

.ads{
    height: 185px;
    -webkit-transition: all .2s ease-in-out;
    outline: 2px solid #444;
    margin: 0 35px !important;
}

.ads:hover{
    -webkit-transition: all .2s ease-in-out;
    position: relative;
    top: -5px;
    -webkit-box-shadow: 0px 5px 3px rgba(0, 0, 0, .8);
}

.ads img{
    width: 220px;
}

Upvotes: 0

Views: 210

Answers (2)

Angga Rifandi
Angga Rifandi

Reputation: 143

Check your image, make sure in same folder with your index page.

Try to put your <img> tag outside your CSS style, and try to host it.

Have you try with another browser such as Opera?

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

Do you have any advert blocking extension installed?

Maybe there's something about the id or class of the img elements (or their parents) that is triggering the advert blocking.

I can imagine that an extension would allow anything on localhost, but once you upload it somewhere else, the advert blocking filters would be activated.

Upvotes: 3

Related Questions