Displaying differently in Chrome, IE and Firefox

Question

This is my first time heavily modifying a Bootstrap3 framework with JS (something I'm only passingly familiar with), so I'm pretty confused as to why certain elements (like carousels) on my soon-to-launch website are displaying differently or not at all.

Specifically, I have problems with background images and pop-up sliders functioning fine in Chrome but not rendering on the Target Species section of my pages in Firefox, of all things.

And then the Video thumbnails on the Media page , which also display perfectly well on Chrome, work on neither Firefox nor IE!

I work for a non-profit organization, and we don't have access to any other tech gurus, so any help or advice people can give would be really, really appreciated! Thanks for your time, everyone!

Answer 1

The TL:DR of the trial-and-error in the comments above:

Adding -moz-transition to the CSS activated the CSS hover feature on the Target Species page. Adding display:block to the img CSS forced the empty img to render.

IE and Firefox didn't recognize the type of image file I was trying to link to. Uploading and linking to .PNG versions of the same file resolved the issue.

Ta-daaa!