Here's my concept:
I want the text to be contained within div elements with an integrated image, rather than just having fading in and out pictures. Here's my attempt:
#first{
position: absolute;
}
#second{
position: absolute;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
position: absolute;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
} <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<h1 id="third">Contact</h1>
<!-- <div class="image">-->
<div id="first" onmouseenter="showSecondImage()" onmouseleave="hideSecondImage()">
<h4 class="text-box ">Why?</h4>
<img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg" >
</div>
<div id="second">
<h4 class="text-box">Why isn't it working?</h4>
<img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg" >
</div>
<script>
$(".unbinded").unbind();
function showSecondImage() {
document.getElementById('second').style.opacity = 1;
}
function hideSecondImage() {
document.getElementById('second').style.opacity = 0;
}
</script>Why is it not functioning correctly? I thought I needed to unbind the onmouseenter and onmouseleave event listeners and bind the picture to respond when the mouse enters.. Any help would be appreciated as I am new to this.