We Keep Coding

the header shakes/tremble when I scroll - jQuery Scrolling problem

I'm completely blocked, I don't understand why the header shakes/tremble when I scroll with this jquery script
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$(".logo").css({ "height": "0px" });
$(".logo img").hide();
};
if ($(this).scrollTop() <= 100) {
$(".logo").css({
"height": "95px",
"-webkit-transition": "all 0.3s ease",
"-moz-transition": "all 0.3s ease",
"-ms-transition": "all 0.3s ease",
"-o-transition": "all 0.3s ease",
"transition": "all 0.3s ease"
});
$(".logo img").fadeIn();
}
});
this is the html file content
<header class="d-flex justify-content-end sticky-top">
<div class="container">
<div class="row logo">
<div class="col-12 text-center mt-2">
<img src="/images/logo.png" alt="Logo">
</div>
</div>
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
</div>
</div>
</div>
</header>
Can anyone help find why?

Already fixed!!!
As you can see I was using the sticky-top bootstrap class for header tag, this class apply position:sticky; property.
This cause the jquery detects that when the scrollTop was greater than 100 the div of the logo image changed its height therefore the scrollTop was again less than 100 and the div reappeared and remained in that game!
I just change to position:fixed; and the scrolling starts to work correctly.

Instead of adding the CSS transition using JS, create a class and use jquery functions addClass and removeClass
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$(".logo").removeClass('effect');
$(".logo img").fadeOut();
};
if ($(this).scrollTop() <= 100) {
$(".logo").addClass('effect');
$(".logo img").fadeIn();
}
});
* {
margin: 0;
padding: 0;
}
.container {
height: 1000px;
}
.logo {
top: 2px;
left: 5px;
position: sticky;
height: 95px;
width: 95px;
overflow: hidden;
}
.logo img {
height: 100%;
}
.effect {
height: 95px;
transition: linear 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
<div class="logo">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" />
</div>
</div>

Overlay divs over image, not knowing height of image/container div

I'm using bootstrap v4.
I have an image, I want it stretched (keeping its aspect ratio) to the full width of the page, will means the image/image container's height can change.
I also want a div on the top and bottom of the image.
Bootstrap has row align-items-start and row align-items-end which I used to try to make my divs go where I want, but it didn't seem to work.
I'm not sure if it is possible to overlay elements like how I want, due to the image/container div resizes. Possibly I need to use javascript for this.
HTML
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100">
<div class="myboxes container-fluid">
<div class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>
</div>
CSS
.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
.myboxes {
position: absolute;
z-index: 2;
}
#cats {
position: absolute;
z-index:1;
}
Not working fiddle
Image of what I want

.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
#topBox, #bottomBox {
position:absolute;
left:0
}
.img-fluid {
width:100%;
display: block;
}
#topBox {
top:0
}
#bottomBox {
bottom:0
}
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100" />
<div id="topBox" class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div id="bottomBox" class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>

.container {
width:100%;
position:relative;
padding:0px;
}
.img-fluid {
width:100%;
}
.box {
position:absolute;
left:0px;
height: 20px;
}
.top {
top:0px;
background: red;
}
.bottom {
bottom:5px;
background: blue;
}
<div class="container">
<div class="box top">TOP</div>
<div class="box bottom">BOTTOM</div>
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100"/>
</div>
It's very much possible to overlay element like you want to and fairly easy too. You don't even need so many classes and div's for doing so.

How to keep a navbar toggle open until selection is made

I've quite a long drop down menu on a site I'm working on when it switches over to mobile. For the life of me I cannot get this dropdown navbar toggle to stay open. What it currently does is opens to show all the selections and then it snaps up to only show one possible selection. It's a scrollable menu, but I want it to stay open until it's clicked.... Can anyone see what I'm doing wrong?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 50px;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

You have set the height to 50px in the #media-query. Change it to auto, and all is well.
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: auto;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>

How to make nav-fixed-top push down content like non-fixed navbar?

I want to make my navbar fixed on the top and push down content when I open the collapse menu like it normally do in static or just nav.
Like this: (https://getbootstrap.com/examples/navbar-static-top/)
But I want the navbar to be fixed to top.
I read this before: Navbar-fixed-top pushes content on page up
but adding padding just won't work, please help me solve this xD
My code
CSS & HTML:
/*------------------------------------------------- Hero Image -------------------------------------------------*/
.calltoaction {
text-align: center;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
.calltoaction h1 {
text-align: center;
display: inline-block;
font-size: 70px;
/*text-transform: uppercase;*/
letter-spacing: 2px;
border: 8px solid #FFFFFF;
border-radius: 13px;
padding: 17px 20px;
color: white;
font-family: sans-serif;
font-weight: 900;
}
.calltoaction h3 {
color: #FFFFFF;
font-size: 29px;
text-align: center;
}
#hero-image {
height: 870px;
background: #e8eced url('http://twnateserver.no-ip.org/Pictures/taiwan-taipei.jpg') no-repeat center;
}
#hero-image h1 {
margin: 215px 0 7px 0;
}
#hero-image h3 {
margin: 3% 0 7px 0;
}
/*#hero-image a {
margin: 3% 0 7px 0;
}*/
/*------------------------------------------------- Hero Image -------------------------------------------------*/
/*------------------------------------------------- navbar----------------------------------------------*/
.navbar {
background-color: rgba(15, 91, 121, 0.03);
background: rgba(15, 91, 121, 0.03);
border-color: rgba(15, 91, 121, 0.03);
margin-bottom: 0px;
/*Line 4213-4217 in Bootstrap.css*/
/*Goal effect: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h*/
}
.navbar li {
color: #000;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: rgba(233, 237, 239, 0.42);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(15, 91, 121, 0.03);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
/*Line 4513-4574 in Bootstrap.css define the colors of navbar texts and hover colors*/
/*---------------------------------------------------------------------------------------------------------------*/
<!DOCTYPE html>
<html>
<head>
<title>Nate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel='shortcut icon' type='image/x-icon' href='favicons/0.ico' />
</head>
<body>
<!-- Fixed Top Navbar, please add middle to top fixed navbar too when you can... -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nate's Testing Place</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- li class="active" -> transform button to grey -->
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span>&nbsp Log in</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Hero Image and texts -->
<div id="hero-image">
<div class="calltoaction">
<h1><b>Nate's Testing Place</b></h1>
<h3>Just a testing site, always open but not seven-eleven...</h3>
<!--Let's Go-->
</div>
</div>
<!-- Hero Image and texts -->
<div class="containter widgetpadding">
<div class="col-md-4 col-xs-6">
<h4>My First Unity Game: Roller Madness (Project 2 of the coursera course)</h4>
Play Roller Madness
</div>
<div class="col-md-4 col-xs-6">
<h4>Just a nevbar testing page, css is so tricky......</h4>
Go to nevbar test page
</div>
<div class="col-md-4 col-xs-6">
<h4>Some installation info for installing Kali linux, no installation required now...</h4>
Kali Linux Installation info
</div>
<div class="col-md-4 col-xs-6">
<h4>Text Tutorial for dual-booting Arch and Windows10 UEFI......</h4>
Arch info
</div>
<div class="col-md-4 col-xs-6">
<h4>Installing arch by installing Antergos is much more easier and pleasant......</h4>
Antergos info
</div>
<div class="col-md-4 col-xs-6">
<h4>sdfsadfsdfsdfasdfawefregergtrhrtyhjytjtyjtyjtyjtyjtyjtyjtyjtryjtryjrtyjrtyjtyj</h4>
aetvretevtdsfv
</div>
</div>
<!--Back to Top Widget: http://html-tuts.com/back-to-top-button-jquery/ -->
<div class="">
</div>
<!--Back to Top Widget-->
</body>
</html>

If padding isn't working for you, try this for <nav>:
nav.navbar-fixed-top {
position:fixed;
top:0;
}
and then the below for <body>:
body::before {
display:block;
content: '';
height:60px; /* or whatever */
}

Add
body {
min-height: 2000px;
padding-top: 70px; /*70px nabar height*/
}
see bootstrap example
live example here

I want to make my navbar fixed on the top and push down content when I
open the collapse menu like it normally do in static or just nav.
I recently met with such a requirement and below jquery helped.
/* Jquery to push to content down for fixed boostrap navbars in mobile displays
* Replace 400px with desired value througout
*/
jQuery(function($){
$("#navbar-collapse li.expanded.active.dropdown").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$(this).trigger("data-attribute-changed");
});
$("#navbar-collapse li.expanded.active.dropdown").on("data-attribute-changed",function(){
if(!$(this).hasClass("open")){
var dropdown_height=$(this).children(".dropdown-menu").height();
var navbar_collapse_margin = parseInt($("#navbar-collapse").css("margin-top")) + dropdown_height;
navbar_collapse_margin = navbar_collapse_margin + "px";
$("#navbar-collapse").css("margin-top",navbar_collapse_margin);
}
else{
$("#navbar-collapse").css("margin-top","400px");
}
});
$(window).on("resize",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Reset margin on resize
});
$("button.navbar-toggle").on("click",function(){
if($("button.navbar-toggle").attr("aria-expanded") == "true")
$("#navbar-collapse").css("margin-top","0px"); // Dealing with regular displays
else
$("#navbar-collapse").css("margin-top","400px");
});
});

navbar has a min-height of 50px as per this rule on line 4169 of bootstrap.css
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
so for the div after navigation menu have a margin-top of at least 50px and it should work fine..

Hover div another div appear on top

I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>

It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/

It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});