Hey there everyone! I'm facing an issue with this variable in my file. I have a picture, and it's supposed to display a swipe box with some information about the image when the user hovers over it. However, for some reason, the box is not appearing.
Here is the HTML/JS code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript">
var modal = $('.modal');
modal.hover(function() {
$(this).toggleClass('open');
});
alsolike(
"qEybdR", "Checkbox Radial Wash",
"dPdoNp", "Google Messenger Icon Button",
"BJAjF", "Masonry Multi Column Grid"
);
</script>
</head>
<body>
<a class="drib" href="http://drbl.in/okRS">View it on Dribbble <i class="fa fa-dribbble"></i></a>
<div class="modal">
<div class="image-container"></div>
<div class="content">
<div class="wrapper">
<div class="category">First Drive Review</div>
<h2>2015 Dodge Challenger SRT Hellcat</h2>
<h4>Andy Wendler <span>from</span> July 2014</h4>
<div class="line"></div>
<p>Make room, Beelzebub, there’s a new demon-prince pony car in town, and it’s from the people who once brought you a real Demon. Known in this mortal realm as the Dodge Challenger SRT Hellcat...</p><a href="http://www.caranddriver.com/reviews/2015-dodge-challenger-srt-hellcat-first-drive-review">Read More <i class="fa fa-caret-right"></i></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And here is the CSS code:
.modal {
width: 600px;
height: 400px;
margin: 50px auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .image-container {
background: url("http://media.caranddriver.com/images/14q3/612022/2015-dodge-challenger-srt-hellcat-first-drive-review-car-and-driver-photo-615298-s-original.jpg");
background-size: cover;
background-position: center center;
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .content {
width: 40%;
Thank you for any assistance you can provide!