Develop Reference

How to create a round area to to fix image as Facebook avatar

I'm creating an input, where users can upload file images to change avatars as Facebook does. But I know Facebook creates a cycle area and users can fix the image to fit with that circle (image below). I have no idea how to do it. Tell me if you know

Possibly the easiest way to achieve such an effect is to overlay a rounded rectangle with a transparent black outline over the image. However, you will also need to wrap the element in another container with overflow set to hidden to limit the backdrop to the image.
Here is a quick demo:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
}
.circle {
position: absolute;
border-radius: 100%;
outline: rgba(0, 0, 0, 0.5) 100vmax solid;
height: 200px;
width: 200px;
top: 50px;
left: 150px;
}
<div class="wrapper">
<div class="circle"></div>
<img class="image" src="https://picsum.photos/500/300">
</div>

How to Combine Two CSS Animations

I'm trying to replicate the menu design used by:
https://www.pandaexpress.com/menu/appetizers
I think I am at the point where I need to use javascript/jquery, but I'm very new and unsure of my next step. When the user hovers over an image the image seems to slide into focus and display information below. I have tried to isolate this into separate actions, modeled by the following jfiddles:
https://jsfiddle.net/Lrqu8L0q/3/ (enlarges and focuses image on hover)
https://jsfiddle.net/4ud7wnop/1/ (slides down to reveal text on hover)
I tried combining them but when I add the
<p>This text is displayed on a downward slide after hover</p>
to the first jfiddle the paragraph isn't hidden.
Now I'm having trouble trying to think of a way to combine the both. I think I need to use javascript/jquery to create a function that applies the slide down to reveal text after the image enlarge has been completed. I'm very new to web design as a whole and am especially shaky with javascript and jquery.
I was wondering if I could write a function that checks if the image has expanded on enlarge yet, and after it's reached a desired height/width run the text slide function. Really not sure how to do this.. could someone point me in the correct direction?

I merged them together here: https://jsfiddle.net/danbovey/53ya31gm/
The main problem was, you need the image to be larger to cover over any detail text you may have.
I have commented on most changes I added in the fiddle. But here's the key parts:
I renamed the bg element to tile, it seemed more appropriate. Instead of working with height for the .slide-down class, I created a transform on the details div when the tile is hovered.
.tile:hover .details {
transform: translateY(150%);
}
You can learn about CSS transforms here: http://css3.bradshawenterprises.com/transforms/
The percentage of the transform can be calculated as the height of img / height of details - 300px / 200px = 150%
To create the growing effect, a pseudo :before element adds a white area the same size of the image before the tile, and when hovered, grows to 25px around each edge. And an identical element is added to the details div.
.tile:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
transition: all 0.4s ease;
content: '';
}
.tile:hover:before {
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
}

Is this what you want here?
https://jsfiddle.net/Lrqu8L0q/9/
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: 2px;
}
.bg:hover {
transform: scale(1.25)
}
.bg{
width: 150px;
height: 110px;
background-color: teal;
border-radius: 2px;
}
.slide-down {
border-radius: 3px;
height: 60px;
width: 150px;
position: relative;
transition: height 0.3s;
-webkit-transition: height 0.3s;
text-align: center;
overflow: hidden;
background-color: teal;
}
.bg:hover .slide-down {
height: 140px;
}
.container{
position: relative;
left: 150px;
top: 50px;
}
<div class="container">
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
</div>
Basically what you need to do is put both your requirement into 1 combined object (in this I mean put both the Image & Text inside 1 container) like in the above example
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
Both of them are put inside 1 container with class .bg, then what you want is to hover the container (not the thumbnail or description itself) and trigger both the scaling & slide-down the menu detail, you can do this by adding the CSS
.bg:hover { ... }
For the scaling, you need to put it together with the container so all the elements inside will be scaled to, then for the description inside it, you need to use
.bg:hover slide-down { ... }
This is where you set the animation that will expand the description of the menu (for explanation, this CSS will trigger on .bg hover, and applied to the element .slide-down inside of it)

What is the best way to approach this background image issue?

My Goal:
So I am making a webpage with a map of the USA as the "background image" and on top of that map I have about 10 markers pointing to specific location. The markers are NOT part of the picture thats just me adding them with absolute positioning and top and left with a percentage.
The Problem:
As I scale down the page or scroll up and down the markers that I have set with absolute positioning begin to move out of the spot they are suppose to be on because the background-image is getting smaller do to it displaying 100%.
The Question:
How can I achieve what I want with the markers on the map where they are suppose to be not moving as the window is being scaled down?
Now I know of only 1 solution and this solution can take a VERY LONG TIME. What I was thinking is instead of positioning the markers that I want on the map with percentage I can do it with pixels and then use a TON of media queries and keep on adjusting it. Not only is this solution going to take extremely long but it also does not seems like the correct way to go about this.
HTML:
<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div> <!--the marker that is positioned absolute-->
</div>
</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body{ overflow: hidden; }
.main-content{
background: url('assets/img/map1.jpg') no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap{
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.marker{
height: 40px;
width: 40px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -20px;
}

The problem is that your background image's size is set to 100%: background-size: 100%. This means that when the browser tries to scale the content, the background does not scale with it (it stays 100%).
Your best bet is to remove the background-size property completely. This allows the markers to stay in place when the page scales, however, you won't get the full-screen background effect that you currently have (unless you have a larger image).
The background will still move, however, once the browser window width is less than the image's width. This is because you have the background-position set to top center. The center is what causes it to move once the browser window width is less than the image width. Change center to left and it will fix that issue. You'll also need to set the marker's container to be based to the left as well for this to work on wider screens though. Basically, removing all center properties would help, but the screen wouldn't be centered on a wide screen.

Try substituting css :before pseudo element for .marker ; set percentage unit values utilizing calc()
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body {
overflow: hidden;
}
.main-content {
background: url(http://lorempixel.com/400/300) no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap {
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.main-content:before {
content: " ";
height: calc(12.5%);
width: calc(5%);
border-radius: 100%;
background-color: red;
position: absolute;
top: calc(50%);
left: calc(50%);
margin-top: calc(1%);
}
<div class="container main-content">
<!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div>
<!--the marker that is positioned absolute-->
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/o79rpawc/

Darken area around jQuery draggable div?

I'm looking for a way to darken all of the area within a container except for a transparent child div. This div is draggable, so the dimmed area would have to move with it. Does anyone know of a way to achieve this using jQuery/CSS? Here is a picture of the effect I am trying to achieve:
EDIT: SOLVED
See #Robby Cornelissen's answer

Could do something like this fiddle. It relies on an absolutely positioned viewport element with a fixed background. If you click the viewport element, you'll see that it moves while the background stays fixed.
HTML
<div class="back">
<div class="overlay">
<div class="front">
</div>
</div>
</div>
CSS
.back, .front {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Swallow_flying_drinking.jpg/1024px-Swallow_flying_drinking.jpg");
background-attachment: fixed;
background-position: 0,0;
}
.back {
width: 1024px;
height: 623px;
}
.front {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 150px;
z-index: 100;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}

Place elements randomly into document background?

I try to create a plugin for personal use, that will place clouds in my web page randomly.
Lets see now what is my idea:
I have create an image with all my clouds.
In my CSS I have create a general class called .cloud that is applyed to all cloud elements and four classes .cloud_1 .cloud_2 .cloud_3 .cloud_4 for each cloud element I like to place in my document.
Here are the css classes I use:
.cloud
{
display: block;
position: absolute;
background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}
.cloud_1
{
width: 800px;
height: 350px;
background-position: 0px 0px;
z-index: 1;
}
.cloud_2
{
width: 800px;
height: 469px;
background-position: 0px -350px;
z-index: 2;
}
.cloud_3
{
width: 800px;
height: 405px;
background-position: 0px -819px;
z-index: 3;
}
.cloud_4
{
width: 630px;
height: 314px;
background-position: 0px -1225px;
z-index: 4;
}
From the other hand I use jQuery to place generate and place my clouds randomly into my document with random top and left.
The problem I have is that, if I set the position to absolute for .cloud selector the clouds that go out of the document width they activating the horizontal scroll bar. If I set it to fixed, the clouds are attached to the same position while I scroll down and so on.
What is the best solution in order to place my clouds with no horizontal scroll bar and not stay fixed in the same position ?
Extra info
I forgot to tell you that the clouds will animated to the right !
Produced code example
<div class="cloud cloud_3"></div>
and jQuery will adding style attributes like that:
<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>
Also jQuery will change the left css position in order to animated

Place all the clouds in a <div> with overflow: hidden, and make it the full size of your document. Set that div to z-index: -1 so that it is behind the rest of your content.

Put the clouds into a containing div withoverflow: hidden set on it. Then when the left position of the cloud is greater than the width of the containing div, move it back to the left so it will scroll accross to the right again.