Develop Reference

fadeOut() not working. It still display after fading out

May I know where am I doing it wrong? What I wanted to achieve is that I wanted to fadeOut/hide the paragraph. When its fading out, the paragraph appears again.
$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
$("p.three").addClass("show").fadeIn(1000).delay(1000).fadeOut(1000);
.one, .two, .three, .four{
visibility: hidden;
z-index: 1000;
top: 0;
left: 0;
}
.spanner{
position:absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
width: 80%;
display:block;
text-align:center;
color: #FFF;
z-index: 1000;
visibility: hidden;
border-radius: 15px;
transform: translate(200px,300px);
}
.overlay{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
visibility: hidden;
z-index: 1000;
}
.show{
visibility: visible;
}
.spanner, .overlay{
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.spanner.show, .overlay.show {
opacity: 1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="spanner">
<p class="three">Creating your database...</p>
</div>

Check other place in your code where you are use fadeIn. When i testing in sandbox it work whell. The paragraph disappear but not re-apprear

Sidebar Toggling - Main content does not stretch to full width when sidebar toggled

I have a layout with sidebar and main content inside a parent element called wrapper and a button to toggle sidebar which is absolute positioned, relative to sidebar. But the main-content is not staying in full width when the sidebar closed. I was able to find out that giving the sidebar as fixed would solve the problem, But I don't want it to be fixed, Is there a way to achieve this without giving position fixed for sidebar. I have used translate for toggling the sidebar.
Jsfiddle - https://jsfiddle.net/wu1zfg35/
Here is the css. working code can be found in js fiddle link
body {
margin: 0;
}
.wrapper{
display: flex;
height: 100vh;
}
.sidebar {
position: relative;
/* position: fixed; */
width: 350px;
height: 100%;
background-color: red;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-webkit-transform: translate3d(-100%, 0px, 0px);
transform: translate3d(-100%, 0px, 0px);
}
.main-content {
width: 100%;
background-color: yellow;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
}
.hide-customize-tab {
position: absolute;
display: flex;
top: 50%;
right: -25px;
align-items: center;
justify-content: center;
height: 25px;
width: 25px;
background-color: black;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
cursor: pointer;
}
.hide-customize-tab .close-button {
display: none;
height: 10px;
width: 7px;
}
.hide-customize-tab .open-button {
height: 10px;
width: 7px;
}
.wrapper.sidebar-opened .sidebar {
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab {
right: -15px;
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab .open-button {
display: none;
}
.wrapper.sidebar-opened .sidebar .hide-customize-tab .close-button {
display: block;
}
.wrapper.sidebar-opened .main-content {
/* margin-left: 350px; */
width: calc(100% - 350px);
}

Remove the width: 350px; from .sidebar and add it to .wrapper.sidebar-opened .sidebar
So the code wil be
.sidebar {
width: 0;
}
.wrapper.sidebar-opened .sidebar {
width: 350px;
}

How to replicate modal css3 animation effect when clicking search?

I really like the effect of clicking on the search box and the search page coming up and the normal page fades out. How can I replicate this? Is this CSS3 only?
https://atmospherejs.com/

You can do that with CSS only and here is one way.
In this sample I used 2 radio inputs to keep track of whether to show the search box or not.
html, body {
margin: 0;
height: 100%;
}
#shide, #sshow {
display: none;
}
.container {
width: 100%;
height: 100%;
background:url('http://lorempixel.com/1024/600/city/9/') no-repeat;
background-size:cover;
transition: transform .6s ease-out, opacity .6s ease-out;
z-index: 1;
}
.showsearch{
position: absolute;
top: 25px;
right: 25px;
background-color: rgba(255,255,255,0.9);
color: #F00;
font-size: 20px;
border-radius: 5px;
padding: 10px 25px;
cursor: pointer;
}
.searchbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255,255,255,0.9);
transition: opacity .5s ease-in;
}
.searchbox .close{
position: absolute;
top: 25px;
right: 25px;
width: 60px;
height: 60px;
cursor: pointer;
}
.searchbox .close:before,
.searchbox .close:after {
content: ' ';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: rotate(45deg);
background: #000;
}
.searchbox .close:after {
transform: rotate(-45deg);
}
.searchbox > div {
position: relative;
top: 46%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.searchbox > div > div {
font-size: 24px;
}
#sshow:checked ~ .searchbox {
opacity: 1;
z-index: 2;
}
#sshow:checked ~ .container {
opacity: 0.4;
transform: scale(0.9, 0.9);
}
<input type="radio" name="search" id="sshow">
<input type="radio" name="search" id="shide">
<div class="searchbox">
<label class="close" for="shide"></label>
<div>
<div>Search box</div>
<input type="text" class="field">
</div>
</div>
<div class="container">
<label class="showsearch" for="sshow">Search</label>
</div>

Yes this is css along with a little bit of jquery you can make this happen. You will need to wrap your body content in a wrapper so you can scale it with css. Then use jquery toggleClass to give the body a class of something like search-open. Then you can use transitions for the rest like so:
Here is a fiddle demo Fiddle
Css:
.search-overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
background:rgba(255,255,255,0.9);
z-index: -1;
transition: all 250ms ease-in-out;
}
.body-wrapper{
transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
width:100%;
height:100%;
}
.search-open .search-overlay{
opacity:1;
z-index: 5;
}
.search-open .body-wrapper{
position:fixed;
top:0;
left:0;
opacity:0.5;
transform: scale3d(0.85, 0.85, 1);
}
Html:
<div class="search-overlay">
Search Content...
</div>
<div class="body-wrapper">
Body Content...
</div>
Then jquery to toggle the class use a button or something in the body content and the overlay to close it:
$('.search-button, .search-close').on("click", function(){
$('body').toggleClass("search-open");
});

How to create a smooth zoom and display an overlay when another HTML element gets hovered?

1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});

All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>

Transition from 100% to auto

I have the following: http://jsfiddle.net/yHPTv/2491/
I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.
Thanks.

As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
transform:translateX(100%);
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
transform:translateX(0)
}
Check the Demo Fiddle

Consider transitioning on right, from -100% to 0:
.block {
position: relative;
width: 500px;
height: 150px; /* shortened to fit in the "Run" window */
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
right: 0;
transition: 1s;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>

For transition to work, you have to define the property you wish to change in both element states.
In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')
If you instead use something like:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
right: 0%;
}
It will work because we defined the 'right' property in both states ('.hidden' and ':hover')