Develop Reference

how to ovelap a image on other image by styling scss in reactjs?

I have a design. In this design, one is overlapping on another image. I have created some code to try as given in the design. but it's not working for me. Click here to find the design
Below is some line of code of components. that is tried by me
<div className="container">
<Image className="container-img1" src={img1}/>
<Image className="container-img2" src={img2}/>
</div>
below is a style in scss
.container{
text-align: center;
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-right: -5rem;
}
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-left: -5rem;
}
}
Click Here to check what I have designed. but it's not looking as given in design.
How can I style the same as given in Design? And should be responsive also.

To achieve the demo image you can eliminate the border with transparency for the img2 that has higher stack order in DOM.
.container-img1 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-right: -1.1rem;
}
.container-img2 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-left: -1.1rem;
/* make it transparent */
border-left-color: transparent;
}
To make it responsive, the image width seems very small but you need to adjust the width & margin according to the device size using media query.

How can I make my modal background go to the bottom of the page rather than the bottom of the viewport?

I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}

Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}

Centre a DIV based on viewable browser space

I am trying to centre a DIV (form) based on the presently viewable browser space, and one that takes into account how far up or down a page I have scrolled. I would like the form centred as and when I press a button. My attempt is below. The problem with my attempt is that if I have scrolled down a page far enough for instance, the form is not entered, but is centred if I scroll all the way up the page again.
If I have scrolled down the page, and want the form to appear, the first image shows what i get.
If I am at the top of the page, then the form is properly centred.
PS:- No jQuery solutions please
CSS for div #docForm
#docForm {
font-family: sans-serif;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
height: 425px;
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
color: #484848;
}

#docForm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
or if you want to use flex, create a div with class formContainer, put your form inside of it and then:
.formContainer {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

Since you have a fixed width and height, you can do this by setting the left and top to the center of the screen, then offsetting the container by half of it's width and height:
#docForm {
width: 600px;
height: 425px;
border: 1px solid #ccc;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -311px /* -(width + padding*2 + border_width*2) / 2) */
margin-top: -223px /* -(height + padding*2 + border_width*2) / 2) */
}
All settings not relevant to the solution omitted in this answer, however note that you must not set right or bottom, or you will get unintended results.
In contrast to using flexbox or translate, this will be compatible with browsers that don't support CSS Level 3.

Smart Sticky Navigation Menu

I'm having a small problem with some text jumping around in my sticky menu. This is my code: http://jsfiddle.net/u6ywraj8/
As you can see, I want the red #menu to stick to the top when a user scrolls down. However, the text in the top left part of the menu jumps around. I want this text to always be in the top left part of the red menu, I don't want it to have the initial ~100px padding.
Thank you for your help!

Try this one
sticknav {
background: none repeat scroll 0 0 #ffffff;
display: inline-block;
height: 30px;
left: 0;
margin-left: 0;
margin-right: 0;
position: relative;
right: 0;
width: 100%;
z-index: 9999;
}

Add float: left; to this class sticknav{}
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
float: left;
}

Horizontally slide out content with JQuery on click, click again to close?

I can't seem to quite find what I need. Without trying too hard to explain it, I basically need the "Connect" social media bar in the top right of this website - http://www.cmssquirrel.com/web_works/
I won't be using it for that purpose exactly, but it works exactly like I need my function to do. Everything I found seems to be a vertical menu style thing. I need to horizontally expand content on click and hide it again on click once more. Not quite sure where to begin?

Here's more of a starting point than a polished solution, but it should get you going in the right direction.
DEMO
HTML
<div class="wrap">
<a class="open" href="#">open</a>
<div class="outer">
<div class="slide">
One
a
uaoeua
aoeue
aaoeeo
</div>
</div>
</div>
jQuery
var w = 0;
$('.slide').children().each(function() {
w += $(this).outerWidth();
});
$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').toggle(function() {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}, function() {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
});
CSS
.wrap {
position: relative;
left: 50px;
top: 20px;
}
.outer {
height: 40px;
position: relative;
overflow: hidden;
}
.slide {
border-radius: 19px 19px 19px 19px;
position: absolute;
top: 0;
right: 0;
background-color: black;
height: 40px;
}
a {
color: gray;
line-height: 35px;
float: left;
outline: none;
}
.slide a {
float: left;
display: block;
padding: 0 10px;
}
.slide > :first-child {
padding-left: 15px;
}
.slide > :last-child {
padding-right: 45px;
}
.open {
position: absolute;
right: -25px;
top: 0;
background-color: black;
border-radius: 19px 19px 19px 19px;
height: 40px;
padding: 0 15px;
z-index: 5;
}

You can extend jQuery's animation functionality to achieve this.
See a demo of this at:
http://dock.ronggur.com/tutorial/jquery%20tutorial%20-%20horizontal%20animated%20menu/
which is outlined at:
http://sandbox.ronggur.com/2009/01/25/jquery-tutorial-horizontal-animated-menu/
Essentially, you could just substitute the hover event in that demo, and use a click event.