We Keep Coding

My toggle button will not switch from left to right, I have coded in JavaScript and cannot find the bug?

First someone suggested it was a typo with my classList property and I made the necessary changes but it still is not working. I have js node downloaded but it still is not responding. Can anyone help? I cant yet find the bug i need some extra help. I have posted my css javascript and html files below
Here is my work..
var btn = document.getElementById("btn");
function togglebtn() {
btn.classList.toggle(".active");
}
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.hero{
background: #1d2026;
min-height: 100vh;
width: 100%;
color: #fff;
position: relative;
}
nav{
display: flex;
align-items: center;
}
nav .menu{
padding-right: 30px;
padding-left: 10px;
padding-bottom: 40px;
cursor: pointer;
}
nav .logo{
width: 500px;
height: 200px;
object-fit: none;
padding-right: 50px;
padding-bottom: 60px;
}
nav ul{
flex: 1;
text-align: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
list-style: none;
margin-right: 20px;
padding-bottom: 100px;
font-size: 25px;
margin: 0 20px;
}
nav ul a{
text-decoration: none;
color: #fff;
}
nav button{
background: #efefef;
height:30px ;
width: 60px;
border-radius: 20px;
border: 0;
outline: 0;
cursor: pointer;
margin-bottom: 100px;
margin-right: 20px;
}
nav button span{
display: block;
background: #999;
height: 26px;
width: 26px;
border-radius: 50%;
margin-left: 2px;
}
.lamp-set{
position: absolute;
top: -20px;
left: 22%;
width: 200px;
}
.lamp{
width: 100%;
}
.light{
position: absolute;
top: 97%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 1;
}
.text-container{
max-width: 1000px;
margin-top: 2%;
margin-left: 50%;
}
.text-container h1{
font-size: 80px;
font-weight: 400;
display: inline-block;
color: #fff;
}
.text-container p{
font-size: 40px;
font-weight: 200;
display: inline-block;
color: #fff;
margin-top: 10px;
}
.emails{
background: #00a8f3;
padding: 14px 40px;
display: inline-block;
color: #fff;
font-size: 25px;
margin-top: 30px;
margin-left: 50%;
border-radius: 30px;
}
.active{
background: turquoise;
}
.active span{
background:#ffff ;
margin-left: 31px;
}
<div class="hero">
<nav>
<img src="menu.png" class="menu">
<img src="ovlogo.png" class="logo">
<ul>
<li>
<a href="">
Home
</li>
<li><a href="">contact</li>
<li><a href="">shop</li>
</ul>
<button type="button" onclick="togglebtn()" id="btn"><span></span></button>
</nav>
<div class="lamp-set">
<img src="lamp.png" class="lamp">
<img src="light.png" class="light">
</div>
<div class="text-container">
<h1>One Stop Shop.</h1>
<p>Get the latest "as seen on" products and appliances that fit you and your everyday needs.We specialize in variety and identifying cunsumer sentiment to maximize the expirence with overviral, your online marketplace. </p>
</div>
<div class="emails">
subscribe for emails
</div>
</div>

You have to remove the "." from the toggle function className.
function togglebtn() {
btn.classList.toggle("active"); // remove the "." from the class name
}

Footer only works when Zoom Text Only is set in Firefox, text overflows if no Zoom Text Only?

I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:
body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}
img.logo1 {
width: 200px;
}
.wrapper {
border: 2px solid;
}
.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}
footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}
footer.caautos h2, footer.caautos h3 {
margin: 10px;
}
div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}
div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
div.content p {
margin-left: 5px;
}
.results-vehicleresult {
margin: 20px;
}
.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}
.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}
.columns-vehicleresult .column {
flex: 33.33%;
}
/*
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
*/
.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}
.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
h1.eurola {
font-size: 240%;
}
.vehiclesold {
color: red;
}
picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}
/*
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
*/
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}
picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}
ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.mauen li {
float: left;
}
ul.mauen a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}
.imagallery1 li {
display: inline;
margin: 0;
}
/*
.imagallery1 img {
width: 20%;
height: auto;
}
*/
.imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}
img.hald {
width: 230px;
}
div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}
.logo-112 blockquote {
font-weight: 700;
}
img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
<link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>
<div class="results-vehicleresult">
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div><div class="columns-vehicleresult">
<picture>
<img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
</picture>
<div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
</div>
</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>✆ 01909 496000</h1>
</div>
</footer>
© 2022
</div>
</body>
</html>
For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?
It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.

when you change page zoom, the browser changes resolution. use #media for a specific resolution.
you can read about that here.

Aligning an image to the right of text

I want to align this image to the right side of the text but I am unable to do this. All the ways I have tried but in the end, the image appears below the text contrary to what I want actually.
In my assumption, I have written the correct code.
Please see the image here.
Here is what I have in my code:
<!--Intro Page start-->
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="images/undraw_growth_analytics_8btt.png" alt="">
</div>
</div>
</section>
And here is the CSS:
#intro{
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
#intro .intro-left{
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1{
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after{
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p{
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta{
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right{
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img{
max-width: 600px;
}
Please let me know where is my error. Thanks!

use flex for wrapper class:
#intro {
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
.wrapper {
display: flex;
}
#intro .intro-left {
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1 {
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after {
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p {
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta {
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right {
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img {
max-width: 600px;
}
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="http://placekitten.com/301/301" alt="">
</div>
</div>
</section>

Max-height: 0 not collapsing Div

I would like my chat box to collapse when they touch the header of the chat, similar to facebook. I know that hide_wrapBox is correctly being added, but it doesn't set the height of its contained elements to a (collapsed) fixed height. In other words, the messages inside the chat box
disappear but the box still stands, where I'd prefer it to minimize.
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
Jquery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
#media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}

It's actually collapsing, but you have the wrapper around those divs such as #messages-card which is setting a height. So while #messages is collapsing, parent of #messages-card is maintaining the height you have set, making it appear nothing is collapsing:
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
You'll need to play around with adjusting that wrapper's height, and it's positioning to resolve the issue you're having.

Instead of adding hide_wrapBox to messages try toggling it on wrapBox
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').addClass('hide_wrapBox');
}else{
$('.wrapBox').removeClass('hide_wrapBox');
}
});

Div appear on hover of different div

I was wondering if it is possible to make #text-1 to appear with an animation of opacity:0; to opacity:1; when #screamer is hovered over?
I want #text-1 to appear under #screamer in a transition when div b is hovered over, div b is CSS circle (box with border-radius of 50% to width of 60px and height 60px) with a background image. the box color has an opacity of 0.
Here is the relevant code:
/* ABOUT */
#aboutus {
text-align: center;
margin: 0px;
margin-top: -35px;
font-weight: 500;
}
/* MANAGERS */
#managers-head {
font-weight: 500;
}
#importantpeople {
text-align: center;
}
#importantpeopletxt {
text-align: center;
}
#manager-1 {
font-weight: 500;
float: left;
margin-left: -2px;
display: inline-block;
text-align: left;
margin-left: 1px;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
margin-right: 6px;
}
#manager-3 {
font-weight: 500;
float: right;
margin-right: 10px;
display: inline-block;
text-align: left;
padding-right: 6px;
}
#important {
width: 100%;
height: 300px;
background-color: #ff9900;
position: absolute;
z-index: -1;
top: 430px;
}
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: left;
margin-left: 3%;
display: inline-block;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
display: inline-block;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url(../images/screamer.png);
background-size: 100%;
float: right;
margin-right: 3%;
display: inline-block;
}
#text-1 {
text-align: left;
padding-right: 150px;
float: left;
}
#text-2 {
text-align: center;
padding-right: 150px;
}
#text-3 {
text-align: right;
padding-right: 150px;
float: right;
}
<div class="container">
<div class="row" id="importantpeople">
<div class="twelve columns">
<h4 id="managers-head">Our Managers</h4>
</div>
<div class="row" id="importantpeople">
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</div>
<div class="row" id="importantpeopletxt">
<h6 id="manager-1">Screamer</h6>
<h6 id="manager-2">KINZU</h6>
<h6 id="manager-3">Swezii</h6>
<p id="text-1">Just a guy chilling on his computer creating works of art for people</p>
<p id="text-2">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p id="text-3">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>

I was wondering if it is possible to make #text-1 to appear with an
animation of opacity:0; to opacity:1; when #screamer is hovered over?
Since #screamer and #manager-1 aren't siblings or parent-child, you'll need JavaScript for this.
You've tagged jQuery, so here's a quick-and-dirty:
$('#screamer').hover(
function() {
$('#text-1').animate({opacity: 1});
},
function() {
$('#text-1').animate({opacity: 0});
}
);
CSS
#text-1 {
opacity: 0;
}
Snippet
$('#screamer').hover(
function() {
$('#text-1').animate({opacity: 1});
},
function() {
$('#text-1').animate({opacity: 0});
}
);
/* ABOUT */
#aboutus {
text-align: center;
margin: 0px;
margin-top: -35px;
font-weight: 500;
}
/* MANAGERS */
#managers-head {
font-weight: 500;
}
#importantpeople {
text-align: center;
}
#importantpeopletxt {
text-align: center;
}
#manager-1 {
font-weight: 500;
float: left;
margin-left: -2px;
display: inline-block;
text-align: left;
margin-left: 1px;
}
#manager-2 {
font-weight: 500;
text-align: center;
display: inline-block;
text-align: center;
margin-right: 6px;
}
#manager-3 {
font-weight: 500;
float: right;
margin-right: 10px;
display: inline-block;
text-align: left;
padding-right: 6px;
}
#important {
width: 100%;
height: 300px;
background-color: #ff9900;
position: absolute;
z-index: -1;
top: 430px;
}
#screamer {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url("http://placehold.it/200x100");
background-size: 100%;
float: left;
margin-left: 3%;
display: inline-block;
}
#kinzu {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url("http://placehold.it/200x100");
background-size: 100%;
display: inline-block;
}
#swezii {
border-radius: 50%;
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0);
background-image: url("http://placehold.it/200x100");
background-size: 100%;
float: right;
margin-right: 3%;
display: inline-block;
}
#text-1 {
text-align: left;
padding-right: 150px;
float: left;
}
#text-2 {
text-align: center;
padding-right: 150px;
}
#text-3 {
text-align: right;
padding-right: 150px;
float: right;
}
#text-1 {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row" id="importantpeople">
<div class="twelve columns">
<h4 id="managers-head">Our Managers</h4>
</div>
<div class="row" id="importantpeople">
<div class="one-third.column" id="screamer">
</div>
<div class="one-third.column" id="kinzu">
</div>
<div class="one-third.column" id="swezii">
</div>
</div>
<div class="row" id="importantpeopletxt">
<h6 id="manager-1">Screamer</h6>
<h6 id="manager-2">KINZU</h6>
<h6 id="manager-3">Swezii</h6>
<p id="text-1">Just a guy chilling on his computer creating works of art for people</p>
<p id="text-2">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
<p id="text-3">I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
</div>
</div>

The vanilla solution for future viewers. No jQuery required.
(Demo)
CSS
#text-1 {
opacity: 0;
transition: opacity 1s linear;
}
Javascript
(function () {
"use strict";
var screamer = document.getElementById('screamer');
screamer.addEventListener('mouseover', function () {
var text1 = document.getElementById('text-1');
text1.style.opacity = '1';
}, false);
screamer.addEventListener('mouseout', function () {
var text1 = document.getElementById('text-1');
text1.style.opacity = '0';
}, false);
})();
EDIT:
If you would like to be able to hover toggle a section of text for each "manager" you can do something like this. Note I've modified the HTML and CSS quite a bit here so you would have to use the HTML and CSS as well as the Javascript
(Demo)