Attach scroll position to opacity of a div
javascript,jquery,scroll,opacity
Shouldn't the second if be greentop? if (st + headerHeight <= bluetop) { $(".blue-bg .color-bg").css({ 'opacity': (1 - st / bluetop) }); } if (st + headerHeight >= greentop) { <!-- CHANGE HERE --> var halfScroll = st / 2; $(".green-bg .color-bg").css({ 'opacity': (1 - halfScroll / greentop) <!-- CHANGE...
How can i change background image opacity without changing on div content? [duplicate]
Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this: 1. Use transparent background images (easiest imo) Rather than setting the background image's opacity after the fact, just make the background image transparent...
Is it possible to have an element's opacity carry through other elements to the background; like a window?
[For a non-fixed non-scaled background image] If I'm understanding correctly, the effect you are looking for is basically for the boxes to show a view through the white boxes and display the background of the page. While this can't actually be done with just css, it can be simulated with...
How can I give an image a black opaque overlay?
You could give your container black background or use css filter: #stage { background-color: black; } #begin { opacity: 0.4; } fiddle: http://jsfiddle.net/oravdmxe/ or #begin { -webkit-filter: brightness(50%); } (use appropriate prefixes for other browsers)...
Opaque transition using active class
css,css3,css-transitions,opacity,pseudo-element
Using only CSS, you can use the :focus pseudo class. When you focus on a div, you can apply any CSS rules there. Also add to the divs a tabindex attribute. See an example: #reveal { color: #cbd3db; font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; } #ss...
Div opacity=0 only when I type something in text-field
You can do it with just CSS if you set the input as required: <input type='text' name='input' id='searchdevice' class='search-field' required='required' autofocus /> <div id='explain'> Search your device in the text field </div> CSS: /* Show by default */ #explain { opacity: 1; } /* Hide it when input field has...
Opacity CSS on inside element?
You cannot force a child to have a higher opacity than its parent. In this instance, you could set a partially-transparent background-color or background-image to suit. http://jsfiddle.net/Pq4LS/2/ .wrapper{ width:400px; height:500px; background-color: rgb(255, 0, 0); /* Oops, don't forget to set a fallback colour for older browsers */ background-color: rgba(255, 0,...
kineticJS loading images sequentially (and set fillPatternImg) opacity tween not working
javascript,arrays,kineticjs,opacity,tween
play is a function. So you should call it. var tween = new Kinetic.Tween({ node: pane, duration: 1, opacity: 0.8, easing: Kinetic.Easings.BackEaseOut, onFinish: function() { loadImages(arrayOfImages, index + 1 } }).play(); Also: when you are finding node with get function it returns Collection. So if you need just node use:...
Elements with opacity < 1 not rendering in chrome when not in first column
html,css,google-chrome,opacity
Since the issue in chrome doesn't seem like it will be fixed anytime soon and the will-change: opacity fix doesn't allow pointer/click events, I've decided to just calculate what the rgb values would be with the desired opacity and hard code them in CSS. I was using the opacity for...
CSS minimum opacity value allowed
Just as zzzzbov mentioned, 0 is the minimum. Note: Since 0 is no opacity, it basically starts from 0.01 The least is opacticy: 0.01; The most is: opacticy: 0.99; ...
Opacity in a menu, but not on a list
Instead of using opacity try to use rgba like below. #header_menu { background-color:rgba(0,0,0,0.7); } So this will not affect any child elements. So wherever you want opacity you can use it like above. The only thing you need to give it rgb format....
Issue creating map shading in Matplotlib imshow by setting opacity to data gradient
python,matplotlib,gradient,opacity,pixel-shading
First of all, Matplotlib includes a hill shading implementation. This calculates the intensity by comparing the gradient with a light source at a certain angle. So it's not exactly what you are implementing, but close and may even give better results. Ran Novitsky has made another hill shading implementation that...
I'm trying to get :after:hover to work
html,css,css-selectors,background-image,opacity
.pic:after is not an element in the DOM. You have to apply the :hover on .pic and then select its :pseudo-element(.pic:hover:after). .pic:hover:after{ content:""; background-color: rgba(118, 255, 161, 0.35); } ...
How to make only background image transparent in responsive square grid?
html,css,image,background,opacity
Seems to work fine if you use the :after/:before solution (setting the image as the background) You just need to make sure you apply the same background properties. .imgautumn1:before { background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg'); } /* For responsive images as background */ .bg:before { background-position: center center; background-repeat: no-repeat; background-size: cover; /*...
Why isn't my jQuery script working?
You have a couple issues with your code. You need to remove the active class first, otherwise you are adding active, and removing it immediately (essentially doing "nothing".) 'active' in addClass should be a string. The correct selector for an element with footer-item and active class is '.footer-item.active' $(document).ready(function(){ $('.footer-item').hover(function(){...
CSS Opacaity on right?
Using pseudo elements: Just create two pseudo elements (:before/:after). Absolutely position them relative to the parent element. Give them a width of 50%, and specify opacity on one. Example Here .test { width: 300px; color: #fff; text-align: center; padding: 10px; position: relative; } .test:before, .test:after { content: ''; background: #000;...
How to place an image beneath a semi-transparent layer?
html,css,image,opacity,transparent
I have done some editing : check this http://jsfiddle.net/h6ckedw6/2/ added a new div for image .bg{ background:url(http://40.media.tumblr.com/9ba0ef66d65ee159bd1d8623964ffc8f/tumblr_njqrueR0gx1tkairwo1_1280.jpg) no-repeat top left; background-size:cover; width:100%; height:900px; position:fixed; z-index:-1; } ...
GeoExt.LayerOpacitySlider not working on WMS layers, any idea why?
javascript,slider,openlayers,opacity,geoext
Finally, the GeoExt.LayerOpacitySlider do not seems to work at all when the layer is created "on the fly". I think it needs the layer to be created before the slider is created (which does not make any sense to me). I suppose this was a bug in GeoExt. My solution...
Delay 1.0 opacity on span, even though parent div has already 1.0 opacity?
Use transition-delay: transition-delay: 0.5s Example: .parent, .parent .child { opacity: 0; transition: 0.5s opacity linear; } .parent .child { transition-delay: 0.5s; } body:hover .parent, body:hover .parent .child { opacity: 1; } /* Extra to show you where to hover over */ body { border: 1px solid #666; } body:before {...
Css button doesn't respond when hovered over
html,css,positioning,opacity,overlapping
Your z-index on class .background_colour was wrong, I corrected that and the hover effect is working now. /* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀ ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█ ▒█▄▄▄ ...
Smooth overflow:hidden
Use a linear-gradient: #scrollmenu:after { content:" "; width:15%; position:absolute; right:0; top:0; height:100%; background-image: linear-gradient(to right, rgba(255,255,255,0), black); } Check the Fiddle Note ::: This will work on the latest Chrome, to keep compatibility use the necessary prefixes. You can check here for more info http://css-tricks.com/css3-gradients/...
html contentEditable document.execCommand change selected opacity
html,opacity,contenteditable,execcommand
You will have to use the styleWithCSS command, which specifies whether CSS or HTML formatting should be generated by the execCommand method into the document. Refer the specs here: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-stylewithcss-command . So, in this case pass true to use the CSS styling instead of generating the font tag. Snippet: function...
nav items in header not working
Try to add a z-index to your nav element, where navigation links are contained nav { z-index:2; position:relative; } Fiddle example...
CSS different backgrounds for different divs
css,css3,background,background-color,opacity
In your html file you have in line 57 background-color: !red; The ! is not a valid part of the color name and needs to be removed.This looks like a typo to me. Doing that yields a red background on the "Hello!" placeholder. You should look into using a linter....
How to change a spritenode opacity
swift,sprite-kit,opacity,skspritenode
Use SKNode's alpha property: red.alpha = 0.5 // set red to 50% transparent ...
css transparent body excluding images
You cannot use opacity property for this kind of effect. Rather create a div over the body and keep its background color as rgba (255,255,255,0.8) and then add image inside that div. Changing alpha values is the only way of separating the opacity of a parent to its child....
JQuery toggle opacity with click
jquery,css,click,toggle,opacity
The problem here is that the .css() method does not return a number - it in fact gives you a string. So when you try to execute something like: var pippo = $('#pippo').css('opacity'); $( "#pippo").css( "opacity", pippo + 0.1 ); If pippo was say, 0.9, then pippo + 0.1 would...
How can I control the color and opacity of each point in a python scatter plot?
python,colors,opacity,scatter-plot,4d
I would do something like the following: import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D # choose your colormap cmap = plt.cm.jet # get a Nx4 array of RGBA corresponding to zs # cmap expects values between 0 and 1 z_list = np.array(z_list) # if z_list...
opacity fade only works in debug mode
use setTimeout like this function swap(test){ if(test==2){ document.getElementById("top").innerHTML = "<img src=\"_images/"+showList[showIndex][3]+".jpg\" width=\"400\" />"; // Sets top invisible div to old picture showIndex++; var elem = document.getElementById("top"); elem.style.transition = ""; elem.style.opacity =1; // makes old picture visible document.getElementById("bottom").innerHTML = "<img src=\"_images/"+showList[showIndex][3]+".jpg\" width=\"400\" />"; } // Set's bottom div to New picture...
When hover at an image, will reduce the opacity and add text
jquery,hover,opacity,line-breaks
DEMO Try this var t; $('div.img img').hover(function(){ var textTopPosition = $(this).position().top+17; var textLeftPosition = $(this).position().left+6; t = $('<div/>') .css({top:textTopPosition}) .css({left:textLeftPosition}) .text($(this).attr('title')) .appendTo($(this).parent()); $(this).fadeTo('fast',0.3); }); $('div.img').mouseleave(function(){ $(this).find("img").fadeTo('fast',1); $(this).find("div").remove(); }); ...
Add circular fading opacity (vignette effect) to images in CSS
Ok, so what we can do is create a :after element that will be equal to the size of the parent. Using this we can set a background gradient that will make it appear as the image is fading into the solid colour background. Note: In this example I have...
Is it possible to turn down the fill opacity of an object to 0 in CSS?
background: rgba(0,0,0,.2); You can adjust the last number to something less than 1 but greater than 0 to get exactly what you are looking for...
change image opacity onclick menu items
jquery,html,css,opacity,fadeto
@skeryl had the right answer to the immediate problem (no id) but why tie this up with jQuery animation when CSS can do it? When you're finished with the scrolling animation, add a class to the active panel. Then use css and css transitions to animate the opacity of images...
CSS:: Second layer of solid non transparent background on top of transparent background is not working?
It is happening because of the opacaity given in the parent div. Check this fiddle. body{ background:url('http://moreimg.com/wp-content/uploads/2015/02/iPhone-Wallpaper-HD-010-640x600.jpg'); /* z-index:0; */ } #heziGangina{ background: rgba(255, 255, 255, 0.4); width: 100%; display: block; height: 300px; } #GanginaHezi{ width: 100px; height: 100px; margin: 10px auto; background: url('http://images.all-free-download.com/images/graphicmedium/plain_white_background_211387.jpg'); background-size: 100px; } ...
Remove rounded corners from text field, keep background opacity iOS Swift
You can set any combination you want programmatically. Eg: override func viewDidLoad() { super.viewDidLoad() let backColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5) myTextField.backgroundColor = backColor let textColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5) myTextField.textColor = textColor } You could also set the background or...
How do I layer CSS opacity?
Is this what you want? nav { font-size:2.0em; } nav:hover { background-color: rgba(0,0,255,0.5); } nav:hover li { opacity:0.5; } nav li:hover { background-color: #ff0000; opacity: 1.0; } <nav> <ul> <li>First</li> <li>Second</li> </ul> </nav> Edit About the "why" part: According to MDN: The value applies to the element as a whole,...
CSS image hover / scale works great in chrome but not IE
You said 4 images, but using id selector, change that to class selector, since id must be unique per page UPDATE This is what I said (do this for all your <img /> tags, btw I just checked and worked fine on IE, Chrome & Firefox. <img class="hovergallery" height="240px" width="162px"...
How to put text on img, and make the image transparent
html,image,opacity,transparent
There is no proper way to add an opacity to a background image. The best thing to do is to fake an element over the background using css for after. It would be more proper to do this to a div though and have your text aligned over your div....
On scroll change element opacity
You need to run .stop() before the animation, or else you're just stopping the scrolling up animation you're trying to do: $(document).scroll(function () { if ($(this).scrollTop() > 500) { $(".bgimage").stop().animate({opacity: 0.4}, 500); } else { $(".bgimage").stop().animate({opacity: 1}, 500); } }); JSFiddle Edit: To clarify what I did you your code:...
jQuery animate with opacity on images show them at different speeds with same animate time
Try to set the same time for showing and hiding images. For example: selectors.$lis.each(function (i) { $(this).on('mouseenter',function () { selectors.$imgs[i].animate({ opacity: 1 }, 500); }).on('mouseleave', function () { $cont_imgs.each(function () { $(this).stop(true, true); }); selectors.$imgs[i].animate({ opacity: 0 }, 500); }); }); It seems to be working. Try on your own...
z-index and opacity - how to hide the div
@trunks175 is correct. Put a dummy behind the header with a white background. <div style="position:absolute;top:0;left:0;opacity:0.5;background:red;height:300px;width:300px;z-index:3"></div> <div style="position:absolute;top:0;left:0;background:white;border:1px solid green;height:300px;width:300px;z-index:2"></div> <div style="position:absolute;top:100px;left:100px;background:blue;height:300px;width:300px;z-index:1"></div> Here's a fiddle: http://jsfiddle.net/teRcg/1/ I believe this is...
How to change the opacity on an element dynamically using javascript
There are a few problems there: To get the current opacity of the element, you need to use the getComputedStyle function (or currentStyle property on oldIE), not .style.opacity. The latter only has a value if it's been assigned explicitly, rather than implicitly through style sheets. The value will be a...
CSS animation with delay and opacity
Just don't set the initial opacity on the element itself, set it within the @keyframes: #element{ -webkit-animation: 3s ease 0s normal forwards 1 fadein; animation: 3s ease 0s normal forwards 1 fadein; } @keyframes fadein{ 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadein{...
Switching opacity using jquery
You can use the setTimeout : http://jsfiddle.net/okkuvep7/1/ $(document).ready(function(){ $(".btn_1").click(function(){ $(".sample").css("opacity","0"); setTimeout(function () { $(".sample").addClass("bg_color"); $(".sample").css("opacity","1"); }, 1000); }); }); ...
Is there a way to make svg polygon drop-shadow to have an opacity?
html,css,svg,opacity,dropshadow
Use hsla filter: drop-shadow( 6px 0 2px hsla(0, 0%, 0%, 0.2)); Updated JSFiddle...
Calculate sum opacity from layers
Here is StackOverflow question addressing this issue HERE In your case first div block 70% background light (since opacity is 0.7). Another div which sits on top of that block more 70% background light of remaining visible light. Thus, Total Opacity = First Opacity + (100 - First Opacity) *...
Ease-in-out function doesn't work, what to do?
Target the transitioning on the Anchor elements , and add an default opacity for the non-hover state. .contact-links a { opacity:1; position:absolute; float:left; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; } ...
Black transparent overlay on image
This can be done with :before or :after #box1{ position:relative; } #box1:before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:black; opacity:0; z-index:0; } #box1:hover:before{ opacity:.6; transition: all 0.5s; } #box1 > *{ position:relative; z-index:1; } http://jsfiddle.net/4bo4zju7/3/...
opacity transition change on click and transition end with jquery (Show/hide))
jquery,css-transitions,show-hide,opacity
after some research it seems you cant do transitions the same time you are changing display property. (hide show) CSS transitions don't work unless I use timeout...
How to hide the particular row of already existing grid programatically
c#,.net,silverlight,opacity,silverlight-5.0
I can think of two ways to achieve this. First, you can't simply set a row(RowDefinition)'s Opacity, because RowDefinition is not a UIElement. What you can do is that you set the Opacity all the elements on this row to 0. In your case the elements would be 3 TextBlocks....
Background image with opacity
Opacity applies to your entire element, not only your background. So by doing html { background-image:url(../img/sea.jpg); background-size: 100%; opacity: 0.5; } You are telling your entire document (html) to have a 50% opacity. So if you're trying to have a background with opacity of 50% two options: option 1 Your...
Slowly fading UIBezierPath
ios,animation,opacity,uibezierpath
The reason why your animation was not happening, but instead the layer was vanishing instantly, was these lines: [disappearingLayer addAnimation:fadeAnimation forKey:@"opacity"]; disappearingLayer.opacity = 0.0; // this line is the problem The second line is canceling the animation and setting the opacity to zero instantly. Cut it (or move it to...
How could I en mass change divs in jquery randomly?
You can use .each() to iterate through a set of elements like $('.point').each(function() { var $this = $(this); var myVar = setInterval(function() { $this.css('opacity', Math.round(Math.random())); }, 50); }) @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300|Roboto:400, 300, 100, 500|Dancing+Script:400, 700); .point { width: 10px; height: 10px; background-color: Black; border-radius: 5px; margin: 0px; display: inline-block; }...
Button opacity causing pixel shift/blur in Chrome
html,css,google-chrome,button,opacity
It happens because the default for backface-visibility is visible. Instead of it being visible, you could hide it.Add this CSS style and check: body{ -webkit-backface-visibility: hidden;} ...
CSS paragraph opacity from dark to light
http://jsfiddle.net/coma/YmzDS/ div.foo { position: relative; } div.foo:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* helps with underneath links */ pointer-events: none; } http://www.colorzilla.com/gradient-editor/...
Make an image go dark and text appear when hovered over
I added a black background to the parent element vividworknav, then I just set the opacity of the image and text on hover and then it seems to work fine. .vividworknav { width: 33.333%; height: auto; float: left; padding: 0; position: relative; background-color: black; } .vividworknav:hover img { opacity: 0.3;...
align the background-image of :after to its parent container
html,css,background-image,opacity
Instead of using :after pseudo class, you can use background value as rgba. which will not effect transparency to child elements. .content { width: 200px; margin: 10px auto; background-image url("http://works.mihaimoga.com/stackoverflow_logo.jpg"); background-color: rgba(255, 255, 255, 0.7); /* added */ } ...
Android alpha and AlphaAnimation
android,animation,opacity,alpha
Find it out, someway, I thought that before adding the animation, I should put the opacity to 1.0f and then make the animation from 0.5f to 1.0f, and this worked. So it would be: if(selected) animationImage = new AlphaAnimation(0.5f, 1.0f); else animationImage = new AlphaAnimation(1.0f, 0.5f); img.setAlpha(1.0f); img.startAnimation(animationImage); ...
W3C CSS validation gives “Parse Error” for opacity
W3C uses some parsing engine which does not allow a syntax like alpha(opacity=70). There is no css property in the standard that would allow such a definition format. I cannot reproduce Parse Error [empty string] in your .image-section #caption using http://jigsaw.w3.org/css-validator/#validate_by_input ...
CSS fading multiple images. Delaying opacity transition. Webkit transition delay
jquery,css,css-transitions,fadein,opacity
You'll want to set the :hover on #fadeImage instead of the individual images. Here's my solution: #fadeImage { position: relative; } #fadeImage img { position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 1s linear; } #image1 { z-index: 3; } #image2 { z-index: 2; } #image3 { z-index:...
Increasing opacity of div with jquery hover
javascript,jquery,html,css,opacity
.css("opacity") will return string. So you have to use parseFloat to turn it to the numeric value before performing some maths operation. $('.cell').hover(function(){ var value = parseFloat($(this).css("opacity")); if(value<1){ value += 0.1; $(this).css("opacity", value); } }); You can also use +=0.1 as the value for the opacity each time hover is...
Setting the opacity of drawing canvas in android
android,canvas,bitmap,android-canvas,opacity
The ball shapes are where each line segment overlaps the previous one. You can fix this by using a second image overlaid on top of the image that you are editing. Initialize the overlay image to completely transparent and make it the same size as the image you are editing....
Tween from material to material in ThreeJS [closed]
With tween.js you can only tween numbers.
Change opacity of div ONLY when scrolling - when standing still change back to full opacity
By "almost opaque," I assume you really mean "almost transparent." In that case, you probably don't want to use fadeOut, because it will make it completely transparent. You could animate opacity instead. You can set a timer as others have suggested. You'll also want to be careful to stop any...
Fade In div when it's scrolled into viewport
jquery,html,scroll,fadein,opacity
Here's a solution that triggers the fadeIn jQuery function after scrolling by the .topdiv div. It subtracts the viewport size from the scrollTop function to get the bottom of the scroll position, and then checks whether its value is greater than the height of the .topdiv div plus the 150px...
How to set background color with opacity by css?
Try this color i exactly match with that sample site... change your font color as you like. background-color: rgba(164, 191, 246, 0.6); or background: rgba(164, 191, 246, 0.6); or color: rgba(164, 191, 246, 0.6);
Clicking out of an element fades out div
you may define an invisible div that sits on the left of the screen which detects mouse onclick event through the jQuery css .invisibleLeft { position:absolute; top:0; left:0; width:10%; } html <div class="invisibleLeft"></div> javascript $(".invisibleLeft").on("click", function(){ $("#page-cover").css("opacity",0.6).fadeIn(300); }); ...
Javascript element.style.opacity is undefined. Why?
javascript,element,setinterval,opacity
Try this Element.prototype.startFlicker = function() { var self = this; var blinkInterval = setInterval(function() { if (parseInt(self.style.opacity) === 0) { self.style.opacity = 1; } else { self.style.opacity = 0; } }, 50); }; In setInterval this refers to window, you need store context (this - current element) in variable and...
Opacity and grayscale filter of background image. Making it black and white and transparent
The unprefixed should be at the bottom! Also, if you don't have content on your page, you should give min-height to the body: html{ height: 100%; } body { position: relative; background-size: 100% 100%; background-repeat: no-repeat; min-height: 100%; } body::after { content: ""; background: url('http://veterinarios.enhermosillo.net/wp-content/uploads/2013/07/gatos.jpg') no-repeat center center; background-size:cover; opacity:...
Is there a window opacity command in Batch?
You'll have to wait for windows 10. Meanwhile you can console2.It's an enhanced console for powershell and cmd.exe. And some other alternatives. From the development team and a place to comment - sort-of...
Changing node/vertice opacity in iGraph in R
r,opacity,igraph,network-analysis
You might wanna try e.g. this: library(igraph) set.seed(1) g <- barabasi.game(200) plot(g, vertex.color = adjustcolor("SkyBlue2", alpha.f = .5), vertex.label.color = adjustcolor("black", .5)) ...
How to apply blur effect to nsview / nswindow?
opacity,nsview,nswindow,osx-yosemite
I was searching for this exact thing myself and managed to find an answer which I'll post here although this is quite an old question now. This method blurs a view and all its subviews: - (void)blurView:(NSView *)view { NSView *blurView = [[NSView alloc] initWithFrame:view.bounds]; blurView.wantsLayer = YES; blurView.layer.backgroundColor =...
How to only make the opacity lower for the background and not the text in it?
what you need - is to apply the opacity on the background instead of on the whole element. replace .music css class with the following: .music { background:rgba(255,255,255,0.6); width: 800px; min-height: 900px; position: absolute; left: 524.5px; right: 524.5px; } (removed opacity and background-color and added background:rgba(...)) hope that helps....
fade background image and then show text(not faded) on hover
The easiest solution is to not target the entire containing div, which is why everything is lowering the opacity, so I would put the image in its own div, position it accordingly, and then simply lower the opacity on the image div, leaving everything else "as-is": Working fiddle demo here:...
Unresponsive jQuery on divs
Well here working code, check it here. $(document).ready(function() { $('#picture_on').click(function() { $('#MinecraftVideo,#picture_on').animate({ opacity: '0.5' }); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="MinecraftVideo"> <iframe width="630" height="350" src="https://www.youtube.com/embed/MmB9b5njVbA" frameborder="0" allowfullscreen id="Minecraft"></iframe> </div> <img...
How to darken a background using CSS
Just add this code to your image css background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), /* bottom, image */ url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png); } UPDATE: Not all browsers support RGBa, so you should have a 'fallback color'. This color will be...
CSS: Text over image with reduced opacity should not have reduced opacity
Add position: relative; to place text at the top. Demo The problem was setting opacity different than 1 creates an stacking context. Then, according to the order defined in the spec, images overlap texts, because: (4) .text are in-flow, non-positioned, block-level elements (6) Images are inline elements that generate a...
Increasing opacity on scrolling [closed]
javascript,jquery,html,css,opacity
You can create two <div>'s with a background gradient to accomplish this effect. Here are two JSFiddles that show what I mean: -Example w/ Code -Fullscreen Result...