I have a DIV with some text and a background image. I want to reduce the opacity of the background image. But when I apply opacity to the DIV it affects the texts within the DIV. How do I change the opacity of the background image without changing the opacity of the texts in the DIV?
I have this code I got from another question on stackoverflow, which I use to reduce opacity of another div but i dont know how to modify it to achieve the above question.
function convertHex(hex,opacity){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
$(".add_to_cart_button").click(function() {
$(".cart-contents").css("background-color",convertHex('#f47d32',40));
});
First step is add z-index: -1; and position: relative; to your back div css:
Ways to change opacity background:
$("#backDiv").css("opacity", "0.4");
$("#backDiv").css({ opacity: 0.4 });
$("#backDiv").fadeTo("slow", 0.4);
$("#backDiv").fadeTo(1000, 0.4); // fist parameter is animate time in ms
Test button with possibility do some action after the animation:
$("#buttonTest").click(function() {
$("#backDiv").fadeTo("slow" , 0.4, function() {
// Animation complete. You can add some action.
});
});
I hope it helps...
Good Luck!
I think below is something you are looking for:
#d1 {
background: url("http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG");
height: 200px;
width: 500px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.7);
height: 100%;
width: 100%;
display: block;
}
#d2 {
color: red;
position: relative;
}
<div id="d1">
<div class="overlay"> </div>
<div id="d2">
Test content
</div>
</div>
Related
In a slider with background image as image of the slide, i want to change the background image when the mouse is hover a button, with a transition effect, and return to first image when the mouse leave the button. The first image have a blur effect while the second haven't it. I know how to change the image, but can't find a solution to apply a transition effect
$('#open-wowstyle').hover({
$('#img-wowstyle').css("background-image","image2.jpg");
});
$('#open-wowstyle').mouseleave({
$('#img-wowstyle').css("background-image","image1.jpg");
});
Also, I don't know why but the event "mouseleave" won't work.
Changing image by css url will not support css transition. You can place images in separate elements like DIV and position DIVs in exact same position using position: absolute. Now you can change the opacity of the DIVS on hover. The opacity property will support css transition.
Please check the below example. The ugly text is the image url from google. sorry for that.
$('.click').hover(function(){
$('.hover-bg-2').fadeOut(300);
});
$('.click').mouseleave(function(){
$('.hover-bg-2').fadeIn(300);
});
.me{
width: 300px;
height: 300px;
position: relative;
float:left;
border: solid 1px black;
}
.hover-bg-1,
.hover-bg-2{
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.hover-bg-1{
background: yellow url('data:image/jpeg;base64,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');
}
.hover-bg-2{
background: red url('data:image/jpeg;base64,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');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="me">
Im the content here
<div class="hover-bg-1"></div>
<div class="hover-bg-2"></div>
</div>
<button class="click">clickme</button>
You need to use :hover with animate, purly done with js and css no jquery.
#btn {
/* background-color: red; */
opacity: 0.6;
transition: 0.3s;
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
#btn:hover {
background-color: green;
opacity: 0.6;
transition: 0.3s;
background-image: url(https://s3.amazonaws.com/gazelle2.cdn.yolocare.com/sites/370/2015/05/line-art-icons-150x150-activity.png);
}
<button id="btn">Button</button>
I am pretty new to jQuery and I am having a bit of difficulty adapting to it being a Java nerd.
I am trying to make these 3 boxes so that when you click one of them, it comes forward and the two in the back dim and stay there, in the back. The problem is that, I want to make it so when you click more than 1 box consecutively, the second box clicked doesn't come forward until the animation ends, much like a queue of box clicks. Right now it's all mixed up and the dimming is fine but the boxes come forward as soon as I click them and not when they should.
I tried callbacks and deferred to no avail.
Here is the code:
Javascript:
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
Here is the JSFiddle:
https://jsfiddle.net/asger/5yvvgoda/14/
var zindex = 1;
$('.box_listener').click(function() {
$(this).css('z-index', zindex += 1);
$(this).siblings('.box_listener').fadeTo(3000, 0.5);
$(this).fadeTo(1, 1);
});
#backgroundbox {
position: absolute;
width: 400px;
height: 200px;
background-color: #E5E8E8;
z-index: -5;
border-style: solid;
border-width: 1px;
}
.box_listener {
position: absolute;
width: 120px;
height: 120px;
background-color: white;
border-style: solid;
border-width: 1px;
}
#redbox {
left: 270px;
top: 20px;
border-color: red;
z-index: 0;
}
#bluebox {
left: 230px;
top: 60px;
border-color: blue;
z-index: 0;
}
#greenbox {
left: 210px;
top: 77px;
border-color: lightgreen;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundbox">
<div class="box_listener" id="redbox">
</div>
<div class="box_listener" id="bluebox">
</div>
<div class="box_listener" id="greenbox">
</div>
</div>
Cheers and thanks!
A more bulletproof approach is to not use jQuery animations at all and instead use CSS transitions. The reason for this is twofold; CSS transitions can be automatically reversed and they can be GPU accelerated. It also means you don't have to artificially wait for the transition to complete before allowing user input.
To accomplish this, just set up two CSS classes; One that tells the elements you're going to animate how they should transition. The other class changes the values on the element, which causes the transition to happen. Then all jQuery needs to do is addClass() and removeClass() in order to cause the transitions to occur.
Below is an example of it in action. I've highlighted the most important aspects with comments.
$('.btn').on('click', function() {
// remove the active class from all buttons,
// this will reverse the transition
$('.btn').removeClass('active');
// apply it to only the current button clicked,
//this will start the transition
$(this).addClass('active');
});
.btn {
display: block;
width: 200px;
padding: 10px 20px;
margin-bottom: 5px;
background: cornflowerblue;
border: 0;
cursor: pointer;
/* set up a transition on any css transformations like
translating, scaling, rotating, etc. */
transition: transform 300ms ease-in-out;
}
/* when this class is added to the button it will scale it, but the
transition already on the button will make sure it happens slowly */
.active {
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>
<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>
You can see example here: http://codepen.io/dimsemenov/pen/gbadPv
Click on Share button and you'll see it blurs the image (and everything else).
I am observing this in inspector and I can't figure it out.
I have downloaded source code and it set a watch in photoswipe-ui-defaults.js in this last line:
_openWindowPopup = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
pswp.shout('shareLinkClick', e, target);
It never gets executed.
I have added other similar modal and I want to achieve same effect, but I can't figure out what is being done to achieve that blur.
Well, it would looks partly complicated that's why it isn't clear for the first look.
There all time rendered .pswp_share-modal with this css
Share Modal:
.pswp_share-modal {
display: block;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity;
}
When you click to the "share" button somewhere in js .pswp__share-modal--fade-in class attaches to the same element with this css:
Modal with fade in effect:
.pswp__share-modal--fade-in {
opacity: 1
}
As you can see the general idea is to turn opacity to 100% when share modal is active. Blur effect is exist cause actual modal background has rgba(0,0,0,0.5);
What you have to do is add an extra div, make it full screen, and then add a background to the div. I have an example here (it looks ugly but you'll catch what I'm trying to say).
$(document).ready(function() {
$('#modal-btn').click(function(){
$('.modal').css("display","block");
});
$('.modal').click(function(){
$(this).css("display","none");
});
});
html, body {
background-color: #000;
color: #fff;
height: 100%;
width: 100%;
z-index: 1;
}
.modal {
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
display: none;
height: 100vh;
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 2;
}
.modal-content {
background-color: #aaa;
height: 50%;
margin: 10px auto;
text-align: center;
width: 50%;
z-index: 3;
}
<html>
<head></head>
<body>
<!-- Page content -->
<div>
The content that goes in the background.
<button id="modal-btn" class="btn">Open Modal</button>
</div>
<!-- Modal -->
<div class="modal">
<div class="modal-content">The Modal Content</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
I have a div that contains a single div that acts as an overlay, along with another div that contains some images. The overlay has an opacity so that the images can be seen, but text can be still be read.
However, when I animate the opacity of the image, it ignores the overlay during the animation, until it is finished.
He's the code:
HTML
<div class="container">
<div class="overlay"></div>
<div class="image-container">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>
</div>
CSS
.container {
position: absolute;
top: 0;
z-index: 1;
height: 100%;
overflow: hidden;
background-color: yellow;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
opacity: 0.78;
background-color: rgb(245, 245, 245);
}
JavaScript
var image = document.getElementsByTagName("IMG")[0];
image.style.opacity = 0;
setTimeout(function() {
image.style.transition = "opacity 3s linear";
image.style.opacity = 1;
}, 1000);
I also have a jsfiddle example:
https://jsfiddle.net/ygqov8t4/
I have tested this in Chrome, Firefox, and Safari on Mac. All browser have the same behaviour, so maybe this is by design?
I have tried doing this using JavaScript, but I was not able to get the animation functioning, and I am concerned about performance because this is going to be run on a lot (100+) images.
image.onload = function() {
var self = this;
for (var i = 0; i < 1000; i++) {
setTimeout(function() {
self.style.opacity = i/1000;
}, i);
}
}
Try forcing the overlay to be above the image by setting its z-index to 1
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
opacity: 0.78;
background-color: rgb(245, 245, 245);
z-index: 1;
}
https://jsfiddle.net/05pwwtm7/1/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am wondering how can you build a "snake like" effect around the rim of an object using javascript/css.
This effect will create an ever going animation around an object that looks like a tiny white slug moving on the rim of the object (looking like a glow)
(Will Edit this Question once I learn the correct phrasing)
I have a small CSS3 version of this:
A small container and an our snake:
<div id="cont"></div>
<div class="snake"></div>
And here is the CSS Magic:
#cont {
width: 150px;
height: 150px;
background: #000;
margin: 10px;
}
.snake {
width: 5px;
height: 5px;
background: #f00;
position: absolute;
top: 5px;
left: 15px;
animation: around 5s infinite;
}
#keyframes around
{
0% { left: 15px; top: 5px; }
25% { left: 165px; top: 5px; }
50% { top: 160px; left: 165px; }
75% { left: 15px; top: 160px; }
100% { top: 5px; left: 15px; }
}
[Demo]
Probably this might help
The code below moves a dot within the specified borders. Please see : that by adjust the width and height of the same dot you may have a snake like creature Have a look at the Fiddle
<html>
<head>
<style>
#midDiv{
float:left;
width: 100px;
height: 100px;
background:rgb(0,0,0);
}
#topDiv,#bottomDiv{
float:left;
width: 110px;
height:5px;
background: red;
position:relative;
}
#leftDiv, #rightDiv{
width:5px;
float:left;
height: 100px;
background: blue;
position:relative;
}
#bodyWrapper{
width: 120px;
height: 120px;
}
#centerDiv{
float:left;
}
.animateObject{
z-index:2;
background: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#topDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#rightDiv").append(div);
$(div).css({position: "absolute"});
$(div).animate({
top: 100
},
2000, function(){
$("#rightDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#rightDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#bottomDiv").append(div);
$(div).css({position: "absolute", right: 0});
$(div).animate({
right: 100
},
2000, function(){
$("#bottomDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#bottomDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#leftDiv").append(div);
$(div).css({position: "absolute", bottom: -5});
$(div).animate({
bottom: 100
},
2000, function(){
$("#leftDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#leftDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#topDiv").append(div);
$(div).css({position: "absolute", left: 0});
$(div).animate({
left: 105
},
2000, function(){
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
</script>
</head>
<body>
<div id="bodyWrapper">
<div id="topDiv"></div>
<div id="centerDiv">
<div id="leftDiv"></div>
<div id="midDiv"></div>
<div id="rightDiv"></div>
</div>
<div id="bottomDiv"></div>
</div>
</body>
This moves a dot within the specified borders. Please see : that by adjust the width and height of the same dot you may have a snake like creature
Here's an improvement on #Starx answer. I've made the #snake dimension-independent, and gave it a glow effect with box-shadow. Demo
<div id="cont">
<div class="snake"></div>
</div>
#cont {
/* some dimensions */
position: relative;
}
.snake {
position: absolute;
z-index: -1;
width: 0px;
height: 0px;
background: #f00;
border-radius: 5px;
box-shadow: 0px 0px 15px 15px red;
animation: around 4s linear infinite,
glow .7s alternate-reverse ease-in-out infinite;
}
#keyframes around {
0% { left: 0; top: 0; }
25% { left: 100%; top:0; }
50% { left: 100%; top: 100%; }
75% { left: 0; top: 100%; }
100% { left: 0; top: 0; }
}
#keyframes glow {
0% { opacity: .2; }
100% { opacity: 1; }
}
Multiple snakes :-)
Hay after having a quick Google at javascript/css3 animaition.
have a look at this demo
This previous question on stackoverflow deals with a border glow effect.
https://stackoverflow.com/questions/15008931/animated-glowing-border-using-css-js link
you could also uses a javascript animation library such as createjs .
http://www.createjs.com/#!/TweenJS
Create four images, that should exactly be a bit larger than the item, so when you look at it, the item is the foreground on a background that has "snaky" borders.
Create one with a fixed color. And make it "snaky" around the borders. Make sure it's a bit larger than the item itself.
The next image should be a different color, that is lighter, to create a glow effect.
The next image should be the color used in the first image, but exactly in the opposite fashion. All the crests in the first image must be troughs here ( To make it snaky ).
The fourth image again is same as the third, but with a lighter color.
Now, using JQuery, use "animate", and change the background of the item and cycle it between these four images in that order. This creates somewhat a "glow and crawl" effect.
You can extend this beyond four images, add more, to further the effects.