FAQ Database Discussion Community


Elements with opacity < 1 not rendering in chrome when not in first column

html,css,google-chrome,opacity
I have a site that gets divided into multiple columns. Whenever an element is not in the first column and has opacity set to < 1, it doesn't get rendered when its container has both the overflow y and border radius properties. Shown in this fiddle css .main { -webkit-column-width:...

Clicking out of an element fades out div

menu,opacity,fade
I have a "mobile" menu which goes on the desktop version too see here: http://bit.ly/1JTBuWy Clicking on the "hamburger" menu triggers the opacity of the overall wrap div. you can see the effect in the link. what I am trying to add is simply another trigger which will close the...

Div opacity=0 only when I type something in text-field

html,opacity
I have a text field and an explaining div. Can I make this explaining div have opacity = 0 ONLY when I type something in the text field? Thanks in advance for any help. Here is the HTML code: <input type='text' name='input' id="searchdevice" class="search-field" placeholder="" autofocus/> <div id="explain"> Search your...

How can I give an image a black opaque overlay?

html,css,opacity
I was busy with a project and thought it would be cool if I could add a black opacity to my pictures but the problem is that I cannot get it to work. I have tried to put the image in the div and than give it a opacity and...

Background image with opacity

css,background-image,opacity
I've been trying to display a navigation bar in front of a full screen size background image which I want to adjust it's opacity. I am able to display the nav bar and the image correctly until I modify the image's opacity. When I do that, the background image is...

Issue creating map shading in Matplotlib imshow by setting opacity to data gradient

python,matplotlib,gradient,opacity,pixel-shading
I am trying to add shading to a map of some data by calculating the gradient of the data and using it to set alpha values. I start by loading my data (unfortunately I cannot share the data as it is being used in a number of manuscripts in preparation,...

Css button doesn't respond when hovered over

html,css,positioning,opacity,overlapping
So I had the button working until i added a new block div called 'dark-blueright' and positioned it under 'light-blue'. /* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀   ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀   ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█...

How to place an image beneath a semi-transparent layer?

html,css,image,opacity,transparent
I know this has been asked before but I can't find a solution that works! My site contains a green background with a form in the center of it. You can view the jsFiddle here I simply want the image found here to be placed beneath the green layer you...

CSS Opacaity on right?

css,css3,opacity
I'm curious is there any CSS able to make opacity on right side? .test { height: auto; width: 300px; background: #000; opacity: 0.6; color: #fff; text-align: center; padding: 10px; } <div class="test">Testing</div> ...

CSS different backgrounds for different divs

css,css3,background,background-color,opacity
Something's not working. The code is here: bambakids.com/menu Content: index.html jquery.easing.1.3.js smoothscroll.js CSS Folder: css/style.css Let me know if you want the images too, although they shouldn't matter. Goal: For there to be a different background color on the contact div then on the main one (headermenu)...

W3C CSS validation gives “Parse Error” for opacity

css,opacity,w3c-validation
While testing the CSS stylesheet for my personal website, the following Parse Errors appeared for the opacity properties. Why is this? Isn't opacity=70 a perfect property for filter alpha for IE8 support? .image-section #sliderLeft Parse Error opacity=70) .image-section #sliderRight Parse Error opacity=70) .image-section #caption Parse Error [empty string] Here is...

JQuery toggle opacity with click

jquery,css,click,toggle,opacity
I have two divs (A and B) and two buttons and I'm trying to achieve this effect: when I click on one button the opacity of div A increase, while opacity of div B decrease, and vice versa. But it seems to work only when decrease... Can't understanfd what's wrong....

Unresponsive jQuery on divs

jquery,html,button,opacity
I have run into a few problems with jQuery. I have learnt HTML and CSS and now am experimenting with making divs affect divs. I have the following in my HTML doc. <div id="MinecraftVideo"> <iframe width="630" height="350" src="https://www.youtube.com/embed/MmB9b5njVbA" frameborder="0" allowfullscreen id="Minecraft"></iframe> </div> <img src="../Images/film_icon.png" id="picture_on"> <script> $(document).ready(function(){ $(“#picture_on”).click(function(){ $(“#MinecraftVideo”).animate({ opacity:...

Black transparent overlay on image

html,css,image,opacity
I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML! help would be appreciated HTML <div id="con"> <div id="box1"> <p id="text1"> <a href="url">DESTINATIONS</a> </p> </p> <p id="text2"> AMALFI<BR>SORRENTO<BR>POSITANO</a> </p> <p id="text3"> <a href="url">THINGS TO...

Opaque transition using active class

css,css3,css-transitions,opacity,pseudo-element
I need help with CSS. I am trying to make it so a div's opacity is set to 1 when another div is clicked as a transitiion. I can only use CSS so I was trying to find out how I could use the active class to do this or...

CSS:: Second layer of solid non transparent background on top of transparent background is not working?

html,css,image,filter,opacity
Title is pretty much self explanatory (and surprising?) I have 3 layer : background Image Transparent div NON Transparent div on top of transparent div. Not very helpful css tricks to solve the problem: 1. filter: alpha(opacity=100); 2. opacity: 1; 3. z-index: 2; 4. background:url('someSolidWhitePicture.jpg'); Here is the jsFiddle :...

Opacity and grayscale filter of background image. Making it black and white and transparent

css,opacity,grayscale
I wanted to make my background image semi-transparent and in grayscale / black and white. I made the following code by combining codes from two different threads of Stackoverflow) body { position: relative; background-size: 100% 100%; background-repeat: no-repeat; } body::after { content: ""; background: url('<?php echo $background[0]; ?>'); opacity: 0.5;...

IMG hover not working

html,css,image,hover,opacity
I have problem with my hover on img in my #picutre div. HTML: <div id="picture"> <img class="content_pic" src="image/exemple.jpg" alt="exemple"/> <img class="content_pic" src="image/exemple.jpg" alt="exemple"/> </div> And my CSS looks like this: #picture { text-align:center; } #picture img { width:40%; height:40%; border:1px solid #000000; display:inline-block; margin-left:0; margin-right:0; opacity:0.4; } .content_pic:hover{ opacity:1.0; }...

css transparent body excluding images

css,transparency,opacity
I have this code body { background-color: #808080; background-image: url('/Content/img/emboss.png'); background-repeat: no-repeat; background-position: center 250px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 10pt; opacity: 0.8; } img { opacity: 1; } However it doesn't work. The entire site, every element has an...

Button opacity causing pixel shift/blur in Chrome

html,css,google-chrome,button,opacity
I have a simple button: <a class="button" href="#">Click Me</a> with the following CSS: .button { color: #FFF; background: #0095CD; cursor: pointer; text-align: center; text-decoration: none; font-size: 20px; font-family: verdana; padding: 0.6em 0.8em; } .button:active { opacity: 0.8; } When the button is clicked I'm seeing a slight blurring/shifting of the...

CSS fading multiple images. Delaying opacity transition. Webkit transition delay

jquery,css,css-transitions,fadein,opacity
I am trying to fade in 3 images stacked on top of one another. Using just CSS transitions. Here is my codepen: http://codepen.io/FredHair/pen/MYQZJv?editors=110 I have managed to fade into the first image but am unsure how to correctly delay and fade into the third image. I have found alot of...

Setting the opacity of drawing canvas in android

android,canvas,bitmap,android-canvas,opacity
I am working on a function that drawing some transparent line on the canvas, the problem is , there is some "ball shape" on the line as the screenshot show. Here is my code: canvas = new Canvas(alteredBitmap); paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(width); paint.setColor(color); paint.setStyle(Paint.Style.STROKE); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeCap(Paint.Cap.ROUND); paint.setAlpha(alpha); matrix_draw...

How could I en mass change divs in jquery randomly?

jquery,setinterval,opacity
Here's a jsfiddle: http://jsfiddle.net/zyqqLtk4/ Basically I have one div that twinkles because when a random number is generated, opacity is set as < 0.5 then -> 0, else = 1.0. How could I use the following: var opacity = 0; var myVar = setInterval(function () { opacity = Math.random(); if...

Delay 1.0 opacity on span, even though parent div has already 1.0 opacity?

html,css,css3,opacity
I realize this may not have a solution outside of javascript, but perhaps someone out there can figure out a way to do this with pure css. I have a parent div and child: <div class="parent"> Text Text Text Text <span class = "delay">TEXT</span></div> </div> CSS .parent{ opacity: 0.0; -webkit-transition:all;...

CSS animation with delay and opacity

css,animation,opacity
I am trying to fade in a element after 2 sec using CSS animation. The code works great in new browsers, but in old browsers the element will stay hidden because of "opacity:0". I want it to be visible in old browsers and I dont want to invlove javascript. Can...

Make an image go dark and text appear when hovered over

html,css,opacity
I am trying to create an effect when I hover over an image, the image goes dark (so the opacity goes down) and text appears. The effects is basically this towards the bottom: http://www.ohmy.io/ . I can do one of the effects on their own, but doing both together they...

How can I control the color and opacity of each point in a python scatter plot?

python,colors,opacity,scatter-plot,4d
I'm looking to graph a 4D data set (X, Y, Z, intensity) using opacity to represent intensity. I also want the color to be dependent on the Z variable as well to better show depth. Here is the relevant code so far, I am a novice when it comes to...

When hover at an image, will reduce the opacity and add text

jquery,hover,opacity,line-breaks
As can see at jsfiddle, When hover at the image, opacity of the image will reduce and text will be added to it. http://jsfiddle.net/tangjeen/QPW27/12/ I am having problem here. Any help will be greatly appreciated. When I hover over the image, the image does not appear to be stable, the...

Changing node/vertice opacity in iGraph in R

r,opacity,igraph,network-analysis
I have a network that, when I plot it, has a number of overlapping nodes. I want to change the opacity of the colors so that you can see nodes underneath others when they overlap. As an example, see this video: https://vimeo.com/52390053 I'm using iGraph for my plots. Here's a...