On my portfolio website each project has his own rectangular with its title. When you move over this rectangular a first photo shows up, when you move from it the photo disappears and the title reappears.
this is the HTML
<div id="wat">
<div class="project1" id="project" >
<div class="een" id="foto" >
<h2>de studio.</h2>
</div><!-- /.een -->
</div><!-- /project1 -->
<div class="project2" id="project" >
<div class="twee" id="foto" >
<h2>tiffanys mechelen.</h2>
</div><!-- /twee -->
</div><!-- /project2 -->
<div class="project3" id="project">
<div class="drie" id="foto" >
<h2>project 3.</h2>
</div><!-- /drie -->
</div><!-- /project3 -->
<div class="project4" id="project" >
<div class="vier" id="foto" >
<h2>geboortekaartjes.</h2>
</div><!-- /vier -->
</div><!-- /project4 -->
<div class="project5" id="project">
<div class="vijf" id="foto" >
<h2>skoetefest</h2>
</div><!-- /vijf -->
</div><!-- /project5 -->
<div class="project6" id="project">
<div class="zes" id="foto" >
<h2>fysica bundel</h2>
</div><!-- /zes -->
</div><!-- /project6 -->
<div class="project7" id="project">
<div class="zeven" id="foto" >
<h2>mmmechelen feest.</h2>
</div><!-- /zeven -->
</div><!-- /project7 -->
<div class="project8" id="project">
<div class="acht" id="foto" >
<h2>biking.</h2>
</div><!-- /acht -->
</div><!-- /project8 -->
<div class="project9" id="project">
<div class="negen" id="foto" >
<h2>project 9.</h2>
</div><!-- /negen -->
</div><!-- /project9 -->
</div><!-- /wat -->
this is the css part
.project1 h2,
.project2 h2,
.project3 h2,
.project4 h2,
.project5 h2,
.project6 h2,
.project7 h2,
.project8 h2,
.project9 h2
{
color: #FF2A00;
text-transform: uppercase;
font-size: 1rem;
padding-top: 70px;
visibility: visible;
}
.een
{
background-image: url(../images/destudio.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.twee
{
background-image: url(../images/tiffanys.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.vier
{
background-image: url(../images/geboorte.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.vijf
{
background-image: url(../images/skoete.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.zes
{
background-image: url(../images/geboorte.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.zeven
{
background-image: url(../images/mmmechelen.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.acht
{
background-image: url(../images/biking.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
JQuery:
$(document).ready(function(){
// mouseenter
$( ".project1" ).on( "mouseenter", function() {
$( ".project1 h2" ).css( "visibility", "hidden" );
$( ".een" ).css( "visibility", "visible" );
});
$( ".project2" ).on( "mouseenter", function() {
$( ".project2 h2" ).css( "visibility", "hidden" );
$( ".twee" ).css( "visibility", "visible" );
});
$( ".project4" ).on( "mouseenter", function() {
$( ".project4 h2" ).css( "visibility", "hidden" );
$( ".vier" ).css( "visibility", "visible" );
});
$( ".project5" ).on( "mouseenter", function() {
$( ".project5 h2" ).css( "visibility", "hidden" );
$( ".vijf" ).css( "visibility", "visible" );
});
$( ".project7" ).on( "mouseenter", function() {
$( ".project7 h2" ).css( "visibility", "hidden" );
$( ".zeven" ).css( "visibility", "visible" );
});
$( ".project8" ).on( "mouseenter", function() {
$( ".project8 h2" ).css( "visibility", "hidden" );
$( ".acht" ).css( "visibility", "visible" );
});
//mouseleave
$( ".project1" ).on( "mouseleave", function() {
$( ".project1 h2" ).css( "visibility", "visible" );
$( ".een" ).css( "visibility", "hidden" );
});
$( ".project2" ).on( "mouseleave", function() {
$( ".project2 h2" ).css( "visibility", "visible" );
$( ".twee" ).css( "visibility", "hidden" );
});
$( ".project4" ).on( "mouseleave", function() {
$( ".project4 h2" ).css( "visibility", "visible" );
$( ".vier" ).css( "visibility", "hidden" );
});
$( ".project5" ).on( "mouseleave", function() {
$( ".project5 h2" ).css( "visibility", "visible" );
$( ".vijf" ).css( "visibility", "hidden" );
});
$( ".project7" ).on( "mouseleave", function() {
$( ".project7 h2" ).css( "visibility", "visible" );
$( ".zeven" ).css( "visibility", "hidden" );
});
$( ".project8" ).on( "mouseleave", function() {
$( ".project8 h2" ).css( "visibility", "visible" );
$( ".acht" ).css( "visibility", "hidden" );
});
});
It works fine but it is a lot of code... can't I write the jquery part differently?