Develop Reference

Blur background when loading symbol opens in Javascript

I have loading symbol which works fine, But when loading symbol opens i can see background and user can edit textbox in backend. I need to disable background, until loading completes. Need to blur background. Tried overlay. Nothing seems to work.
Here is my code.
<style>
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 50%;
opacity: 1;
position: fixed;
top: 50%;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="loader1" class="lds-dual-ring hidden overlay"></div>
$('#loader1').removeClass('hidden'); //to show

I've recreated a working example of the code you've provided.
Your div contains both overlay and lsd-dual-ring classes. IMO, what you want to achieve is to have the loader ring is inside the overlay div and position at the center of the screen.
.lds-dual-ring.hidden {
display: none;
}
.overlay {
background: rgba(0,0,0,.5);
height: 100vh;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: all 0.5s;
width: 100%;
z-index: 99000;
}
.lds-dual-ring {
display: inline-block;
height: 80px;
width: 80px;
top: 50%;
left: 50%;
position: fixed;
}
.lds-dual-ring:after {
animation: lds-dual-ring 1.2s linear infinite;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
content: " ";
display: block;
height: 64px;
margin: 5% auto;
width: 64px;
}
##keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="overlay">
<div id="loader1" class="lds-dual-ring"></div>
</div>

only border transition on hover 90 deg around

enter image description here
please tell me anybody in above image when cursor on it hover automatic rotate border only in above image is it possible by css if possible give a code please

You can do that with animation when hover element.
You can see example here it's the same idea.
Example :- https://www.w3schools.com/howto/howto_css_loader.asp

You can achieve the effect you want like this:
*,
*::after {
box-sizing: border-box;
}
body,
html {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
background-image: url(//unsplash.it/400/400);
background-repeat: no-repeat;
background-size: cover;
border: 15px solid lightgrey;
}
.circle::after {
content: '';
position: absolute;
top: -15px;
left: -15px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 15px solid lightgrey;
border-right: 15px solid steelblue;
}
.circle:hover::after {
animation: spin .75s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle"></div>

javascript fade / zoom effect .. what am i doing wrong

I want the second layer background color to fade (opacity) and scale in the picture div2 .. trying to create something like http://fantasy.co/work
Here is the jsfiddle link
I could not post the whole code as I dont have enough points... Please follow the link and suggest what should do
The JQuery
$(document).ready(function() {
$(".background-color-container").css("opacity", 0.5);
$(".background-color-container").hover(function() {
$(this).animate({opacity: 1.0}, 500);
}, function() {
$(this).animate({opacity: 0.5}, 500);
});
});

use this logic in your solution Fiddler
div {
height: 200px;
width: 200px;
background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
background-size: 100% 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
background-position: center center;
}
div:hover {
background-size: 150% 150%;
}
<div></div>

You can use directly css transition :
just add the :
#imgDemo:hover .div3 img{
transform: scale(1.25);
}
#imgDemo:hover .div2 img{
opacity: 0.5;
}
.div3 img {
transition: transform 0.3s ease-in;
}
.div2 img {
transition: opacity 0.3s ease-in;
}
below your worknig example :
.div1 {
position: relative;
width: 600px;
height: 400px;
background-color: red;
z-index: 99;
}
.div2 {
position: absolute;
width: 100%;
height: 100%;
}
.div2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.div3 {
position: absolute;
width: 100%;
height: 100%;
align-items: center;
}
.image-container {
justify-content: center;
height: 100%;
width: 100%;
align-items: center;
display: flex;
}
.image-container img {
width: 125px !important;
margin: auto;
position: relative;
height: auto;
z-index: 40;
}
.div1:hover .div3 img{
transform: scale(1.25);
}
.div1:hover .div2 img{
opacity: 0.5;
}
.div3 img {
transition: transform 0.3s ease-in;
}
.div2 img {
transition: opacity 0.3s ease-in;
}
<div class="div1">
<div class="div2">
<img src="https://wallpaperscraft.com/image/absolute_vodka_collection_alcohol_drinks_20440_1920x1080.jpg" />
</div>
<div class="div3">
<div class="image-container">
<img src="https://ez.no/var/ezflow_site/storage/images/media/images/symfony-2.3-lts-in-ez-publish-platform-5.2/390464-1-eng-GB/Symfony-2.3-LTS-in-eZ-Publish-Platform-5.2_fancybox.png" />
</div>
</div>
</div>

On Scrolling Navbar Go Behind Slider And Silder Parallax Effect Is Not Working

when i scrolling down my menubar go behind the cycle slider i tried z-index 1 but its not working please give any soloution i dont know what going wrong
</div>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
</div>
<div class="section_about">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
z-index: 1;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.container{
height: 100vh;
width: 100%;
max-width: 100%;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
}
.site-dt{
background-color: #fff;
height: 573px;
width: 100%;
}
#slider-main{
height: 578px;
width: 100%;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider-main #slider img{
height: 100%;
width: 100%;
}
.section_about{
height: 573px;
width: 100%;
background-color: #de5670;
overflow: hidden;
position: absolute;
}

Try doing a
display: block;
or
display: table;
on both of them. Set the index 2 for the menu, and 0 for the slide container. I hope this helps.

Try this :
#slider-main #slider img{
height: 100%;
width: 100%;
position:absolute !important;
z-index:2!important;
}

How can i trigger hover effect on element using pure javascript?

Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.

CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>