FAQ Database Discussion Community


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...

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...

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...

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...

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...

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:...

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...

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...

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'. /* ▒█▀▀▀█ ▀▀█▀▀ ▒█░░▒█ ▒█░░░ ▒█▀▀▀   ▒█▀▀█ ▒█▀▀▀ ▒█▀▀▀█ ▒█▀▀▀ ▀▀█▀▀ ░▀▀▀▄▄ ░▒█░░ ▒█▄▄▄█ ▒█░░░ ▒█▀▀▀   ▒█▄▄▀ ▒█▀▀▀ ░▀▀▀▄▄ ▒█▀▀▀ ░▒█░░ ▒█▄▄▄█ ░▒█░░ ░░▒█░░ ▒█▄▄█...

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 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...

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:...

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...

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)...

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....

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:: 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 :...

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...

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...

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...

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...

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;...

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...

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; }...

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...

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 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> ...

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 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...