Here is the repository for my personal website: https://github.com/flakpanzer40/flakpanzer40.github.io
As you may notice, the particles I've used are simply showing below my name, image, and description. I've tried numerous times to overlap them so that the particles happen in the back, but to no avail. I've tried absolute positions, z-index, re-arranging the DIVs, etc. I'm terrible at CSS.
Can anyone help?
Please add following styles:
.container {
/*other css*/
position: relative;
z-index: 1;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
Use the following Code:
HTML:
<div id="particles-js" style="">
<canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;">
<div class="intro-text">
<span class="name">University of Waterloo Computer Science</span>
<hr class="star-light">
<span class="skills">Problem_solving expert - Hardworking - Passionate</span>
</div>
</div>
</div>
</div>
</div>
CSS:
#particles-js {
width: 100%;
height: 100%;
background-color: #13717c;
position: relative;
top: 0;
}
It is important that the parent (#particles-js) has position: relative so that you can use absolute positioning for the children.
Related
I currently have something like this
<div class="mycol" id="mycanvas" style="z-index: -1; top:150px;left:240px;width:88%; height:80%; position: absolute;background-color:red;">
</div>
<div class="testclass">
Hello World
</div>
I would like the content of testclass to appear below mycol class. I know i could do that by making it absolute is there any where other than that by which i can tell it to vertically start of when the mycol class ends
You could put testclass inside mycol, and add position: relative; top: 100%; to testclass like this:
<div class="mycol" id="mycanvas" style="z-index: -1; top: 150px; left: 240px; width: 88%; height: 80%; position: absolute; background-color: red;">
<div class="testclass" style="position: relative; top: 100%;">
Hello World
</div>
</div>
I think the requirement of keeping the div.testclass under div.mycol doesn't need the use of position.
If you can explain the complete requirement which you are trying to achive can help all to give you a better solution.
<div style="height:200px;padding:50px;">
<div class="mycol" id="mycanvas" style="width:88%; height:80%;background-color:red;">
</div>
<div class="testclass" style="margin-top:20px;">
Hello World
</div>
</div>
Well, by making mycol have position:aboslute you are removing it from the page's normal flow. We can demonstrate this like so.
<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>
<div class="testclass" style="margin-left: 500px; height: 500px; width: 500px; background-color: black;"></div>
As you can see, the testclass is completely unaffected by mycol's position.
So, in your sample, although we can see the red box, it is not affecting the position of "Hello World".
If we would like to move the text below it, then we could use margins, disrupt the normal flow (using position), or put content behind the existing text to eventually force it below it.
Since you specified that you do not want to use the position technique, then I will demonstrate this using margins. We can use percents, such as : margin-top: 80%, but this would have some odd effects. W3 specifics that margin-top goes off of the width of it's container when using percents, so you wouldn't benefit a whole lot.
Regardless, it does answer your question!
<div class="mycol" style="position: absolute; height: 80%; width: 88%; background-color: rgba(255, 0, 0, .4); top: 150px; left: 240px;">
</div>
<div class="testclass" style="margin-top:100%; background-color: gray;">
Hello world
</div>
I have seen this question have been asked many times, but mine is a little complicated.
I am using bootstrap on my website, and basically, I am trying to join two images one half is a customer image, other half is a business image. What actually I'd like is, when one hover overs the first half i.e the customer image, the second half i.e the business image should turn to the second half of the customer image and the vice versa when someone hovers over the business image.
Here's my HTML code.
<div class="pics">
<div class="1half">
<div class="col-sm-2" style="padding-right: 0;" id="b1">
<img src="image/b1.png" alt="" width="340px" style="float: right;">
</div>
<div class="col-sm-2" style="padding-right: 0; display: none;" id="c1">
<img src="image/c1.png" alt="" width="340px" style="float: right;">
</div>
</div>
<div class="2half">
<div class="col-sm-2" class="flash" style="padding-left: 0;" id="c2">
<img src="image/c2.png" alt="" width="338px">
</div>
<div class="col-sm-2" class="flash" style="padding-left: 0; display: none;" id="b2">
<img src="image/b2.png" alt="" width="338px">
</div>
</div>
In the above code, what I want is when someone hovers over #b1: #c2 should go away, and #b2 should be visible. I tried implementing CSS changes but it doesn't work.
I have added the link on JSfiddle here. http://jsfiddle.net/2R5bq/
Basically on hover, both should be the same.
No need for so many div's. One main wrapper, two image wrappers/masks is all you need. See this JSFiddle a threw together.
HTML
<div id="imageWrapper">
<div id="imageLeftImageWrapper">
<image src="http://lorempixel.com/320/180/animals/" />
</div>
<div id="imageRightImageWrapper">
<image src="http://lorempixel.com/320/180/cats/" />
</div>
</div>
CSS
#imageWrapper {
position: relative;
width: 320px;
height: 180px;
}
#imageWrapper #imageLeftImageWrapper {
position: absolute;
top: 0px;
left: 5px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper {
position: absolute;
top: 0px;
right: 0px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper img {
position: absolute;
right: 0px;
}
#imageWrapper #imageLeftImageWrapper:hover,
#imageWrapper #imageRightImageWrapper:hover {
width: 320px;
z-index: 1;
}
Here's my HTML:
<div class="image-container" >
<div class="image-overlay">
dsfsadfdsafjhjkdhfkjashflksadhjfklasdjhfklsjdkfhasdjkhfsjkhdjkfs
</div>
<div class="img-user">
<img src="/images/flandre.jpg" width="220" />
</div>
</div>
And the CSS:
.image-container {
position: relative;
}
.img-user, .img-overlay {
position: absolute;
top: 0;
left: 0;
}
.img-overlay {
position: absolute;
z-index: 10;
}
But <div class="image-overlay"> appears underneath <div class="img-user">.
I'm trying to follow the example in the top answer of this question, and it seems like I'm doing everything similar, but it's not working.
You have a typo in your classes.
You're writing img-overlay in your css.
You're using image-overlay in your html.
I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!
Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/