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

Image Gallery - Slider

I developed an image gallery. In a main box (large box) I introduce the first image of the array, the rest are arranged horizontally below that image.
Is there a way to get the big box to function as an image slider?
At this point try to apply, however I have some problems :( the secondary images do not appear below the main one, nor is the slider working correctly, when I move to the second image, all the others are loaded.
I chose to use * ngFor to load secondary images, in case I can have an array with indeterminate quantities of images.
DEMO
CODE
<div class="col-md-6">
<div class="drop">
<div class="abc">
<img class="img-fluid Images" [src]="images[0].img" >
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</div>
<!-- -------------------------------SLIDER----------- -->
<div class="col-md-6">
<ngb-carousel *ngIf="images">
<div class="drop">
<div class="abc">
<ng-template ngbSlide>
<img [src]="images[0].img" alt="Random first slide">
</ng-template>
</div>
</div>
<ng-template ngbSlide>
<div class="row">
<div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>
<img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
What I want with the functional slider
I intend that when clicking on the buttons on the slider it will display the secondary images (the images shown below the main image)

you have to use corousel-Api to get change event.
corousel emit slide event when image is change(automatic or via button)
so you have to add an event to corousel change i have added change($event) to (slide) output.
<ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)" >
<ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.image" [alt]="">
</div>
<div class="carousel-caption">
<h3>{{imgIdx.head}}</h3>
<p>{{imgIdx.data}}</p>
</div>
</ng-template>
</ngb-carousel>
<div *ngFor="let imgIdx of belowImageData; let i = index" style="width:80px" >
<img class="col-sm" [src]="imgIdx.image" style="width: 100%; height: 100%;">
</div>
then in chnage event i have updated belowImageData array according to image loded in upper corousel.
constructor(){
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(0,1);
}
change(data){
console.log(data.current)
this.belowImageData = JSON.parse(JSON.stringify(this.data));
this.belowImageData.splice(data.current, 1);
}
you can also add this line to pause automatic slide
this.carousel.pause();
i have developed a stackblitz for you(without proper css).

wonky problems with bootstrap -> rows not consistent width only on large screens

So I have this weird problem with bootstrap and rows. It only seems to happen in the LG view which is greater than 1200px. For some reason random rows are not conforming to the full amount they should(in this case 1140px) and instead are smaller.
I am including a few pictures to show exactly the issue I am talking about to see if I can figure out what is going on. Any help would be appreciated.
If i make the width smaller to simulate a smaller screen everything works without issue.
https://s21.postimg.org/8i0w6wtpz/Screen_Shot_2016_09_18_at_7_22_08_PM.png
https://s22.postimg.org/xr3ekeyf5/Screen_Shot_2016_09_18_at_7_23_09_PM.png
https://s22.postimg.org/dkzwlj2rl/Screen_Shot_2016_09_18_at_7_23_28_PM.png
<section class="inner">
<div class="container portfolio-container">
<h2>PORTFOLIO</h2>
<div class="prcnr" ng-repeat="port in portfolio">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<a rel="{{port._id}}" class="fancybox" href="images/uploads/{{ port.main_image }}">
<img src="images/uploads/{{ port.main_image }}" alt="" class="main_portfolio_image img-responsive">
</a>
<div class="hidden">
<a rel="{{port._id}}" ng-repeat="image in port.images" class="fancybox" href="images/uploads/{{image}}">
<img src="images/uploads/{{image}}" alt="">
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 port-txt">
<h4><b>{{ port.title }}</b></h4>
<p ng-bind-html="port.description"></p>
</div>
</div>
</div>
</div>
</section>
Custom CSS Pertaining to this code :
.portfolio-container h4 {
font-size: 22.5px;
}
.portfolio-container .port-txt p {
font-size: 15px;
}
#media (min-width: 1200px) {
.main_portfolio_image {
width: 570px;
height: 385px;
}
}

those picture are not slimier to your code.
there is 2 col-lg-6 column I found where one column contain a hidden filed. that's not a problem. And you are using bootstrap so you don't need to set media query for image . Just simply use img-responsive and set the image with a min-width of 100% like and add container-fluid in html part
img.img-responsive{
min-width:100% !important;
}

Change Text on another Div

Good evening Community,
I have a problem with my code.
HTML:
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
I want if I hover over the div "mbubble" that the class "thome" will change it's text. I tried to do that by making them visible / invisible.
CSS:
#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }
But it's sowhing no affect?
Can you tell me how you would do that? Or at least any way that's working to change the text by hovering?
Best regards,
Michael

How about this:
$('#mbubble').hover(function () {
$('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})

If your structure is really that simple, then a trick with pointer-events could work:
the idea is to kill pointer-events on a and reactivate it only on #mbubble, since when you hover a child, parent is hovered too, the selector can be taken from the parent .
a {pointer-events:none; }
#mbubble {pointer-events:auto;}
a:hover + #title .thome , .tabout {display:none;}
a:hover + #title .tabout {display:block;}
<a href="aboutme.php">
<div class='aboutus'>i don't trigger anything
<div id="mbubble">
I DO
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
Now, if you realize that without pointer-events but only a;hover it works , you may understand it can be usefull only if there is other content in <a> that should not react . only clicking on #mbubble will fire the link.Was your example too little ? if not, just use a:hover
http://caniuse.com/#search=pointer-events

It look doable in css, anyway, while not recommmended, there is a quick inline solution in javascript using the transversal DOM, like this:
You got to keep in mind that it can have strange behaviors, non easily copiable by right clicking, this is why inline javascripts should not be used directly. There is workaround around it, good luck.
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
So a more nicer way is to use a function like this:
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="changeText()" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
<script>
function changeText() {
document.getElementById('title').children[0].children[0].textContent='Enter the void!'
}
</script>
Still, this isn't clean enough, the good way in javascript is to add an event listener, like this:
-
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome">
<p style="letter-spacing:10;">Text BEFORE</p>
</div>
<div class="tabout">
<p style="letter-spacing:10;">Text AFTER</p>
</div>
<script>
var toBeWatched = document.getElementById('mbubble');
toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
= 'Enter the void!';setTimeout(function() { document.getElementById('title').children[0].children[0].textContent
= 'Text BEFORE!!!';
}, 2500);
}, false);
</script>
This way the html part is left untouched. (..)

Trying to make different text appear below 3 aligned images on hover

First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.

You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});

First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});

I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.