We Keep Coding

Have a div filled with elements appear when hovering a link, code not working

I seem to have trouble with what should be a simple thing.
I can't figure out why what I did isn't working, I want to have an element appear when a link is hovered, but nothing happens when it's done. It only works when I ask the element to appear when the container is hovered, but not for the link.
.elementcontainer {
opacity: 0;
}
.cardtitle a:hover + .elementcontainer {
opacity: 1;
}
<div class="maxthumb">
<div class="card-body">
<div class="elementcontainer">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<h2 class="cardtitle">
<a class="text-white" href="http://...">Title</a>
</h2>
<p class="cardsub">text2</p>
</div>
</div>
I basically have to have the element appear when the link is hover with a simple animation like a fade in or a slide in but so far I can't even have them appear on hover.

They are not siblings so you can't use a sibling selector
But try this javascript code : onmouseenter ,onmouseleave event
function show(){document.getElementsByClassName('elementcontainer')[0].style.opacity="1";}
function hide(){document.getElementsByClassName('elementcontainer')[0].style.opacity="0";}
.elementcontainer { opacity: 0; }
<div class="maxthumb">
<div class="card-body">
<div class="elementcontainer">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<h2 class="cardtitle">
<a onmouseenter="show()" onmouseleave="hide()" class="text-white" href="http://...">Title</a>
</h2>
<p class="cardsub">text2</p>
</div>
</div>

Not sure if it works with elements above the hovering object but if you put the link above it should work. I guess you can still rearrange the layout in css if you want the link below.
<div class="card-body">
<h2 class="cardtitle">
<a class="text-white" href="http://...">Title</a>
</h2>
<div class="elementcontainer">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<p class="cardsub">text2</p>
</div>

You can make a sibling that follows an element change when that element is hovered, but you can't affect a previous sibling in the same way. I refactored your code a bit to make it work
.card-body {
opacity: 0;
}
.cardtitle:hover + .card-body {
opacity: 1;
}
<div class="maxthumb">
<h2 class="cardtitle">
<a class="text-white" href="http://...">Title</a>
</h2>
<div class="card-body">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<p class="cardsub">text2</p>
</div>

You can attach an event to the hover with JavaScript to change CSS attributes. As shown in the other answer above.
JQuery : https://www.w3schools.com/jquery/event_hover.asp
JavaScript mouseover: Javascript onHover event

How to change the text inside a div by hovering over other elements

So basically I am making some concept logic for a project I am working on. It's a portfolio with boxes of images and I want to be able to change the value of a h2 to some description text based on the box that was hovered on.
Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from a stackoverflow answer. This does what I need but is only shifting through one piece of information instead of many in my case.
Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value.
Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing.
HTML (makes me post code if I have jsfiddle)
<div class="squares">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
<h2 class="squareIdent"> </h2>
</div>

You can implement this using data attribute to hold your description that you want your box to load in the h2 -
Working Example - http://codepen.io/nitishdhar/pen/CdiHa
Explanation
Write your HTML in this structure -
<div class="squares">
<div class="square" data-content="Alpha"></div>
<div class="square" data-content="Beta"></div>
<div class="square" data-content="Gamma"></div>
<h2 class="square-data-holder"></h2>
</div>
Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.
Use this jQuery snippet to achieve the hover effect -
$(document).ready(function() {
$('.square').hover(
function() {
$('.square-data-holder').text($(this).data('content')).fadeIn('slow');
}, function() {
$('.square-data-holder').fadeOut('slow');
});
});
hover() takes two handlers to handle hover in & hover out - $( selector ).hover( handlerIn, handlerOut ), Refer - http://api.jquery.com/hover/
So on hover of any of the div's with class square, we get hold of the content of the div that was hovered using -
$(this).data('content')
And we append the same to the h2 element. On hover out, we just make h2 empty.
This should do what you want.

Judging by the example at http://danielmarkiewicz.com/ it looks like you may need to have formatted content inserted into the heading. Here is one approach to do that with HTML content inside each square.
Demo here
HTML
<div class="squares">
<div class="square square1">
<span class="heading">
<h1>Square 1</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square2">
<span class="heading">
<h1>Square 2</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square3">
<span class="heading">
<h1>Square 3</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square4">
<span class="heading">
<h1>Square 4</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square5">
<span class="heading">
<h1>Square 5</h1>
<h2>Details</h2>
</span>
</div>
<header class="squareIdent"></header>
</div>
CSS
.heading { display: none; } // Hide the heading content within Squares
JavaScript
$(document)
.on('mouseover', '.square', function(e) {
var self = $(this),
headingContent = self.find('.heading').first().html();
$('.squareIdent', self.closest('.squares')).html(headingContent);
})
.on('mouseout', '.square', function(e) {
var self = $(this);
$('.squareIdent', self.closest('.squares')).html(null);
})
;

DEMO
I am probablly late as Nitish already gave a good answer but here is what i have done.
HTML:
<div class="squares">
<div class="square1" data-text="I am Square 1"></div>
<div class="square2" data-text="I am Square 2"></div>
<div class="square3" data-text="I am Square 3"></div>
<div class="square4" data-text="I am Square 4"></div>
<div class="square5" data-text="I am Square 5"></div>
<h2 class="squareIdent"> </h2>
</div>
CSS:
div.square1, div.square2, div.square3, div.square4, div.square5
{
height: 100px;
width: 100px;
background-color: black;
margin-left: 126px;
margin-top: 150px;
float: left;
}
div.squares
{
margin-left: 175px;
}
.squareIdent{
opacity: 0;
}
JS:
$(".squares > *").hover(function(){
$(".squareIdent").text($(this).attr("data-text"));
$(".squareIdent").stop().animate({
opacity: 1
}, 500);
}, function(){
$(".squareIdent").stop().animate({
opacity: 0
}, 500);
});
Note i have added the Animation as you showed in your question.

jQuery Progress animate to predefined width - Multiple Div

How can I animate multiple div width using animate, when a div has already a width defined in the css of html.
For example. If I have style="width:30%;" in the html, and I want to animate that div from 0 to 30% how can I do it? And do that in multiple divs with the same class?
To animate a div that has no width defined, to a certain value, I know I can do it like this $('div').animate({ width: 'value' }, milisecs); but I don't want to set the width value on the JS and repeating this line multiple times.
I created this Fiddle that may help better understanding.
Thank you in advance.

Try to use data() like,
HTML
<p>Single</p>
<div class="container">
<div class="fill" data-width="80%">
<span><b>Bar One</b></span>
</div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
<div class="fillmult" data-width="90%">
<span><b>Bar 1</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="50%">
<span><b>Bar 2</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="70%">
<span><b>Bar 3</b></span>
</div>
</div>
<div class="container">
<div class="fillmult" data-width="20%">
<span><b>Bar 4</b></span>
</div>
</div>
SCRIPT
$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
var width=$(this).data('width');
$(this).animate({ width: width }, 1500);
});
Live Demo

fadein fadeout jquery on mouse-over

I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle

You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.

I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here

using z-index in correct way

I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?

I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>​
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});​
If something's not clear, please let me know.

I think you should add position:absolute; to "slider", and set its position.

You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.

You need an absolute position for z-index to work.