One of the features on my website is a page where, upon hovering over an image, an overlay appears with a caption. Below is the code for one such image:
<div id="content">
<div class="mosaic-block fade">
<a target="_blank" href="files/file1.pdf" class="mosaic-overlay">
<div class="details">
<h4>Form #1</h4>
<p>Permission Slip</p>
</div>
</a>
<div class="mosaic-backdrop"><img src="img/thumb1.jpg"/></div>
</div>
The images and overlays work fine with the linked stylesheets/scripts in the header:
<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../events/eventInfoStyle.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="../events/headbar.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="../events/header.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
However, upon adding Bootstrap components, the images disappear. Here is the Bootstrap code being added:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I'm trying to figure out why the images aren't showing up when Bootstrap is included. In case it helps, here's more of my CSS:
MAIN.CSS:
/* Styles for various sections */
...
EVENTINFOSTYLE.CSS:
/* Additional styles specific to event information section */
...
HEADBAR.CSS:
/* Styling for the header bar */
...