Develop Reference

how to animate an element using js

i made a navbar for practice and tried to hide and show its content only when its title is clicked.
i managed to do it with toggling a hidden class on and off.
but i also want it to have transition and slide down not just to apear out of nowhere. i couldn't do this part.
i put transition inside nav-bar__list-box tweaked the hidden class with and without display:block but i didn't have any success.
hidden class:
.u-hidden-navbar {
display: none;
visibility: hidden;
height: 0 !important;
}
idk what else to do but to ask here for advise.
const btnNavBar = document.querySelectorAll(".nav-bar__heading-box");
const navList = document.querySelectorAll(".nav-bar__list-box");
for (let i = 0; i < btnNavBar.length; i++) {
btnNavBar[i].addEventListener(`click`, function () {
navList[i].classList.toggle("u-hidden-navbar");
for (let b = 0; b < navList.length; b++) {
if (b !== i) {
navList[b].classList.add("u-hidden-navbar");
}
}
});
}
*,
*::after,
*::before {
box-sizing: inherit;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.5;
}
ul {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6e6e6;
}
img {
vertical-align: bottom;
}
.u-hidden-navbar {
display: none;
visibility: hidden;
height: 0 !important;
}
.nav-bar {
margin: 2rem;
border-radius: 0.8rem;
overflow: hidden;
order: 1;
background-color: #e6e6e6;
width: 30rem;
}
.nav-bar__heading-box {
background-color: #3b3b3b;
padding: 1rem;
}
.nav-bar__heading-box:not(:last-child) {
border-bottom: 1px solid #1b1b1b;
}
.nav-bar__list-box {
font-weight: 700;
font-size: 1.6rem;
transition: 5s all ease;
}
.nav-bar__item:not(:last-child) {
border-bottom: 1px solid #1b1b1b;
}
.nav-bar__link {
padding: 1rem 2rem 1rem;
color: #973ae4;
position: relative;
display: block;
transition: 0.4s all ease;
}
.nav-bar__link:hover {
color: #e6e6e6;
transform: translateY(0);
}
.nav-bar__link:hover::before {
transform: scaleX(1);
box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(27, 27, 27, 0.6);
opacity: 1;
}
.nav-bar__link::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: left;
transform: scaleX(0.1);
opacity: 0;
background-color: #973ae4;
transition: all 0.3s ease-in-out;
z-index: -1;
}
<aside class="nav-bar">
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">HTML Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
</ul>
</div>
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">CSS Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>Link</a
>
</li>
</ul>
</div>
<div class="nav-bar__heading-box">
<h3 class="heading-tertiary">JS Topics</h3>
</div>
<div class="nav-bar__list-box u-hidden-navbar">
<ul class="nav-bar__list">
<li class="nav-bar__item">
<a
href="pages/js_topic_01.html"
class="nav-bar__link"
target="content"
>1- JS High-level overview</a
>
</li>
<li class="nav-bar__item">
<a href="hello.html" class="nav-bar__link" target="content"
>Link</a
>
</li>
</ul>
</div>
</aside>

The browser does not know how to interpolate this kind of animation, so you'll have to be a little bit more specific about how you'd like the hidden element to appear.
Switching from display: block to display: none or from visibility: visible to visibility: hidden is a "on/off" situation with no way to guess what the middle state will be...
Instead you could try to transition from :
opacity: 0 to opacity: 1
transform: scaleY(0) to transform: scaleY(1)
both
You can be really creative, and rely on keyframed animations with several intermediate steps, but it's up to you to define the strategy.
document.querySelector('button').addEventListener('click', () => {
document.querySelector('.togglable').classList.toggle('hidden')
})
.togglable{
padding: 50px;
background: red;
transform: scaleY(1);
opacity: 1;
color: #FFF;
transition: .75s;
}
.togglable.hidden{
opacity: 0;
transform: scaleY(0);
}
<button>Click me</button>
<div class="togglable hidden">Hello</div>

CSS pointer-events: none while allowing hover

I'm trying to create an element of top my page which can be hovered. When hovered I want to change the opacity of the element and allow click through.
The thing is when I add the pointer-events: none to allow the click through, my hover is never triggered, which seems logic after all. I though I would be able to deal with it with JavaScript, but event mouseover or mouseenter is not compatible with pointer-events: none.
Here is my example with only CSS: If I add the pointer-events: none; it doesn't work. The element is the red banner, I want to be able to click the buttons underneath while being able to lower the opacity of it.
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
.bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
pointer-events:none;
}
.bandeau:hover {
opacity: 0.4;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
</nav>
<div class="content"></div>
<div class="bandeau">
<span>I will be back !</span>
</div>
</div>
The other example with JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var bandeau = document.getElementById("bandeau");
bandeau.addEventListener('mouseenter', e => {
bandeau.style.opacity = '0.4';
bandeau.style.pointerEvents = 'none';
});
bandeau.addEventListener('mouseleave', e => {
bandeau.style.opacity = '1';
bandeau.style.pointerEvents = 'auto';
});
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
#bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
</nav>
<div class="content"></div>
<div id="bandeau">
<span>I will be back !</span>
</div>
</div>
Is there a way to achieve this or is it impossible?

In your example you could do it easily on a hover on the whole nav element like
nav:hover + .content + .bandeau { opacity: 0.4; }
Or you can move the banner element to the because it's an absolute positioned element. Then a hover on the login button (with the .right class) will make it transparent:
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
.bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
pointer-events:none;
}
.right:hover + .bandeau {
opacity: 0.4;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
<div class="bandeau">
<span>I will be back!</span>
</div>
</nav>
<div class="content"></div>
</div>
I know it's a bit different than a hover on the banner itself, but maybe this can give you some ideas :)

I found a solution based on a comment on the thread linked by #yanca.
I use document.elementFromPoint to chekc what cursor I should display (pointer or auto) based on the lement below the banner. Then I reuse document.elementFromPoint to transfer the click through
Here is the code :
document.addEventListener('DOMContentLoaded', function() {
var bandeau = document.getElementById("bandeau");
bandeau.addEventListener('mousemove', e => {
bandeau.style.display = "none";
var elemUnder = document.elementFromPoint(e.clientX, e.clientY);
bandeau.style.display = "block";
var stylesUnder = getComputedStyle(elemUnder);
bandeau.style.cursor = stylesUnder.cursor;
});
bandeau.addEventListener('click', e => {
bandeau.style.display = "none";
var elemUnder = document.elementFromPoint(e.clientX, e.clientY);
bandeau.style.display = "block";
elemUnder.click();
});
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;cursor:pointer;}
button.right {float:right;}
#bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease;
}
#bandeau:hover {
opacity:0.4;
transition: 0.2s ease;
}
<div class="container">
<div id="body">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right" onclick="alert('click contact')">Contact us</button>
<button class="right" onclick="alert('click login')">Log in</button>
</nav>
<div class="content"></div>
<div>
<div id="bandeau">
<span>I will be back !</span>
</div>
</div>
Thanks for the help !!

Waypoints not working properly with my sidenav

I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`

Href not working in Chrome, does work in IE

I have this website which I'm attempting to work on. I've obtained a template, which I'm editing the HTML to customize. There exists a section on the page that has three icons with a "More" button beneath them. I've set the button to link to another webpage, but it only works on IE -- not Chrome. Further, the icons themselves are supposed to change as you hover, which again they do in IE but not in chrome.
I have this code:
.intro3 {
text-align: center;
color: $(intro3.color);
}
.intro3 .row {
width: 90%;
margin: 0 auto;
padding: 120px 0 120px 50px;
}
.images_author {
font-size: 6em;
}
.images_author span {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
line-height: 160px;
color: $(intro3.circle.right);
border-width: 40px;
border-style: solid;
border-radius: 100%;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.right);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.left);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.authsx:hover .images_author span {
color: $(background.color.all);
border-style: double;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.left);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.right);
}
.intro3 .fourcol div.padd_25 {
padding: 25px;
}
.intro3 .fourcol div strong {
font: normal normal 22px PT Serif,serif;
line-height: 1.8em;
}
.intro3 .fourcol p a.more_aut {
font-size: 12px;
margin: 10px 0 10px 0;
display: inline-block;
padding: 10px 30px;
background: transparent;
color: $(intro3.color);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border: 2px solid $(intro3.color);
border-radius: 6px;
opacity: 0.6;
}
Which sets up for the (where the action is executed):
<div class='intro3'>
<div class='row'>
<h2 class='title_s authors'> Explore </h2>
<div class='fourcol authsx'>
<div class='images_author coll_1'>
<span class='icon fa fa-linkedin'/>
</div>
<div class='padd_25'>
<strong>LinkedIn Profile</strong>
<p>Connect via LinkedIn. See my skills, experience, and qualifications.</p>
<p><a class='more_aut' href='http://www.linkedin.com/in/amandabayless'><span>More</span></a></p>
</div>
</div>
<div class='fourcol authsx'>
<div class='images_author coll_2'>
<span class='icon fa fa-user'/>
</div>
<div class='padd_25'>
<strong>About Me</strong>
<p>Learn more about me. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
<div class='fourcol last authsx'>
<div class='images_author coll_3'>
<span class='icon fa fa-paperclip'/>
</div>
<div class='padd_25'>
<strong>Samples of Work</strong>
<p>See a small sample of my work. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
</div>
I only have very rudimentary skills here, and much internet sleuthing could not show me why there was a difference in the browser. For reference, This is the website. Could anyone offer advice? I don't know where to go from here.

Inside #page-content there is an element with class intro3 which has a pseudo element :after. The pseudo element overlays your links. Give it a lower z-index or remove it if you do not need it.

Scripted image won't wrap with text

just trying to align some text with an image on the right, the image is using javascript to transition between 2 images. I need the transitional effects to stay but also be able to have text wrap to the left of it in the same container. Can anyone help please?
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kawasaki Motorcycle Club UK</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<nav>
<ul class="navbar">
<li>BIKES</li>
<li>NEWS</li>
<li>EVENTS</li>
<li>JOIN</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div class="contentbox">
<div id="maincontent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
<img name = "slides" id="slides" src="images/mybike.jpg"/>
<img name = "slides" id ="slides" src="images/racergreen.jpg"/>
<script> //adapted from https://www.youtube.com/watch?v=e1AYSgA57h8
var interval = 4 * 20; // seconds between change
var images = document.getElementsByName("slides");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</div>
</div>
<br>
<div>
<div class="socialcontainer">
<img id="facebookbutton"/>
<img id="twitterbutton"/>
<img id="googlebutton"/>
</div>
</div>
</body>
CSS
body {
font-family: 'Arial', sans-serif;
background-color: #000;
}
#wrapper {
max-width: 1000px;
margin: 0 auto;
background-color: #fff
padding: 32px;
}
#header {
height: 110px;
background: url(images/header.png);
}
header h1 { //NOT NEEDED
text-align: center;
color: #FFF;
}
header h2 { //NOT NEEDED
font-variant: small-caps;
text-align: center;
color: #fff;
}
.navbar {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background: url(images/navbar.png);
background-size: contain;
}
ul.navbar {
margin-top: 15px;
}
.navbar li {
display: inline;
padding: 0 40px 0 40px;
font-size: 30px;
font-weight: 800;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
background: #60bf19;
color: #FFF;
text-shadow:
-5px -5px 0 #000;
}
a:hover {
color:dimgrey;
text-shadow:
-5px -5px 0 #000;
}
a:active {
color: #FFF
text-shadow:
-5px -5px 0 #000;
}
.contentbox {
width: 1000px;
position: relative;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
height: 1000px;
}
#maincontent {
color: #FFF;
position: relative;
float: left;
}
#slides{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
right: 0
}
#slides.fade-out {
opacity:0;
}
#slides.fade-in {
opacity:1;
}
.socialcontainer {
width: auto;
height: auto;
text-align: center;
}
#facebookbutton {
background-image: url(images/facebook-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#facebookbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#twitterbutton {
background-image: url(images/twitter-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#twitterbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#googlebutton {
background-image: url(images/google-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#googlebutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Assuming I understand what you are trying to do..
you could place the text and images inside the #maincontent element within seperate div tags respectively and then align them side-by-side with their own css. Technically they aren't within the SAME container like you said you wanted but they are still both within the #maincontent container.
here is my JSFiddle that hopefully helps. note that I included random images inplace of your ones for the fade effect.
<div id="maincontent">
<div id="content-box">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
</div>
<div id="image-box">
<img name="slides" width="500px" id="slides" src="images/mybike.jpg" />
<img name="slides" width="500px" id="slides" src="images/racergreen.jpg" />
</div>
</div>
added css:
#content-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}
#image-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}