JSFiddle - React, Tailwind, and code Playground

by Owen Kim

HTML

<div class="rollover" id="foto">foto</div>
<div class="rollover" id="grafisch">grafisch</div>

<div id="space">&nbsp;</div><br><br><br>

<div class="obj" id="fotografie">fotografie</div>
<div class="obj" id="ontwerp">ontwerp</div>

CSS

div.rollover {
    border: 3px solid #000;
    width: 100px;
    height: 50px;
    float: left;
    margin-left: 20px;
    text-align: center;
}
div.space {
    clear: both;
}
div.obj {
    visibility: hidden;
    border: 3px dotted red;
    width: 100px;
    height: 50px;
    float: left;
    margin-left: 20px;
    text-align: center;
}

JavaScript

$("div#foto").hover(function() {
    $("div#fotografie").css('visibility','visible');
}, function() {
    $("div#fotografie").css('visibility','hidden');    
});
$("div#grafisch").hover(function() {
    $("div#ontwerp").css('visibility','visible');
}, function() {
    $("div#ontwerp").css('visibility','hidden');    
});