Todo :
Hide an element smoothly after clicking on it , like in this page https://www.alphafx.co.uk/ , when you click on the letter A it fades away smoothly
Achieve this effect with just HTML,CSS,JavaScript ?
var foo = document.getElementById('foo');
document.getElementById('hide-button').onclick = function () {
foo.className = 'hidden';
};
document.getElementById('show-button').onclick = function () {
foo.className = '';
};
#foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
#foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
Text
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
You can achieve this using jQuery fadeOut check working fidle below:
Using jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
<script>
$(".hide").click(function() {
$(".hide").fadeOut("slow");
});
</script>
</body>
</html>
Using JavaScript
function fadeOutEffect() {
var fadeTarget = document.getElementById("hide");
var fadeEffect = setInterval(function() {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("hide").addEventListener('click', fadeOutEffect);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
#hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
</body>
</html>
You can easily achieve this using jQuery fadeOut() effect.
Below is the w3scool reference:
https://www.w3schools.com/jquery/eff_fadeout.asp
Click on "try it yourself>" button and you can modify the code as per your requirement.
Here is another working example for you:
https://jsfiddle.net/kag4jqyh/
Please try this:
$(function() {
$('#spantext').on('click', function() {
// $(this).hide();
$(this).fadeOut("slow"); // if you want to hide it slow
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>
Here's an answer in vanilla JavaScript (without using jQuery)
HTML
Text
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>
JavaScript
const hideButton = () => {
document.getElementById("foo").classList.add('hidden');
}
const showButton = () => {
document.getElementById("foo").classList.remove('hidden');
}
CSS
.foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
.foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
What you want is just an animation to hide the view.
You can use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> for getting such beautiful effects. You can see the sample code below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity: 0});
});
$("#btn2").click(function(){
$("#box").animate({opacity: 1});
});
});
</script>
</head>
<body>
<button id="btn1">Animate</button>
<button id="btn2">Reset</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
if you want to use JavaScript rather than using jQuery. then
Try this
/******define time-delay only in s(seconds)****/
var timeSlot = '.3s';
function hide(obj){
obj.style.visibility= 'hidden';
obj.style.opacity= 0.8;
obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
}
.div1 {
font-size: 1.2rem;
cursor: pointer;
text-align: center;
margin-top:-100px;
}
.logo {
font-size: 10rem;
}
<div class="div1" onclick="hide(this);">
<h1 class="logo">A</h1>
</div>
Related
So i'm trying to make my background move endlessly from left to right repeatedly. I tried all sorts of things, but I don't know why the code doesn't work.
Here's my code
HTML:
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
Javascript:
var i=null;
window.onload = function(){
var move = setInterval(move, 30);
move();
}
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
Here are updated code for your requirement.
You only need pass move method to setInterval, don't need call move() after setInterval
var i=1;
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
window.onload = function(){
var move1 = setInterval(move, 30);
//move();
}
#section1{
height: 200px;
background-image: url('https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg')
}
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
You can use CSS animation to achieve this.
#section1 {
width: 200px;
height: 200px;
background: url('http://placehold.it/1000?text=test image');
background-size:cover;
animation-duration: 3s;
animation-name: scroll;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes scroll {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
<div id="section1"></div>
I am trying to program the element with an ID of "opacity" to change its opacity from 1 to 0 upon clicking the element. But then I click the element, nothing happens. What am I doing wrong?
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0;
}
<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<head>
<meta http-equiv="author" content="Chris" />
<link href="jquery.css" type="text/css" rel="stylesheet" />
<script src="jquery.js"></script>
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
I am trying to program the element with an ID of "opacity" to change its opacity from 1 to 0 upon clicking the element. But then I click the element, nothing happens. What am I doing wrong?
Thanks.
You just need to update the css. Your css #opacity is overwriting your img.faded. All you need to do is #opacity.faded JSBin
#opacity.faded {
opacity: 0;
}
You have an id that is setting opacity: 1 and then you're adding a class with opacity: 0, this creates a conflict.
If you wanted to make a simple change to this, then you can just add !important to your faded class css so it takes presidents over the id.
Like this:
.faded {
opacity: 0 !important;
}
You need to use the jQuery .css() method to set the opacity to 0.
This is because in your CSS stylesheet, you have given #opacity an opacity of 1, which can not be overriden by adding another class with an opacity of 0. You have to add an inline style to override the CSS properties set in the stylesheet with .css().
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<head>
<meta http-equiv="author" content="Chris" />
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).css("opacity", "0");
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
You can make the opacity rule in .faded more important by adding !important.
#message {
height: 300px;
width: 300px;
background-color: rgb(255, 10, 10, .5);
overflow: scroll;
}
.box {
background-color: blue;
}
#background {
background-color: red;
}
.submenu {
background-color: purple;
color: green;
width: 150px;
}
.option {
background-color: cyan;
}
#dashboard {
margin-left: -70px;
background-color: blue;
width: 80px;
border: 5px solid;
}
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<meta http-equiv="author" content="Chris" />
<script>
$(function() {
jQuery('#one').hide();
jQuery('#fadeToggle').click(function() {
jQuery('#one').fadeToggle(500);
});
jQuery('#fadeTo').click(function() {
jQuery('#two').fadeTo(500, .5);
});
jQuery('#congrats').animate({
marginLeft: '+=1200px',
},
10000,
);
jQuery('#congrats').fadeOut(11000);
jQuery('#opacity').click(function() {
jQuery(this).addClass("faded");
});
});
</script>
</head>
<body>
<div id="one">
<p>This is the fadeToggle() method carrying out a "well-defined operation on data," the jQuery object ('#box'), in this case. The parameter is "500," which stands for half a second.</p>
</div>
<input type="submit" id="fadeToggle" value="fadeToggle()" />
<div id="two">
<p>This is the fadeTo() method.</p>
</div>
<input type="submit" id="fadeTo" value="fadeToggle()" />
<div id="heading">
<img id="congrats" src="congrats.gif" />
</div>
<img id="opacity" src="congrats.gif" />
</body>
</html>
The faded class will not change the opacity attribute since there's a direct rule related to #opacity element that force the opacity attribute value to be 1 :
#opacity {
opacity: 1;
____^^^^^^^^^^
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
That will be always applied since according to the specificity hierarchy the id attribute has more weight than the class, to force the class rule you could use !important :
img.faded {
opacity: 0.5 !important;
}
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0.5 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
You could write a more specific rule using the id #opacity like :
img#opacity.faded {
opacity: 0.5;
}
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).addClass('faded');
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img#opacity.faded {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
I prefer the use of css() method to set the opacity instead, like :
jQuery(this).css({opacity: 0});
$(function() {
jQuery('#opacity').click(function() {
jQuery(this).css({
opacity: 0
});
});
});
#opacity {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
img.faded {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
<img id="opacity" src="congrats.gif" />
I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.
Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?
I would get fancy with keyframes
#keyframes myAnimation{
0%{
opacity: 1;
transform: rotateX(90deg);
}
50%{
opacity: 0.5;
transform: rotateX(0deg);
}
100%{
display: none;
opacity: 0;
transform: rotateX(90deg);
}
}
#myelement{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;
}
If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.
I use jQuery to implement this.
//jQuery
$(document).ready(function() {
var target = $("#div");
$("#btn").click(function() {
removeElement(target);
});
});
function removeElement(target) {
target.animate({
opacity: "-=1"
}, 1000, function() {
target.remove();
});
}
div {
width: 100px;
height: 100px;
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="div"></div>
<input type="button" value="fadeout" id="btn">
</body>
</html>
Use transitions like this:
function waithide()
{
var obj = document.getElementById("thisone");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}
div
{
height:100px;
width :100px;
background:red;
display:block;
opacity:1;
transition : all .3s;
-wekit-transition : all .3s;
-moz-transition : all .3s;
}
<div id="thisone" onclick="waithide()"></div>
I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?
<style>
#test{
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
</style>
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$('button').click(function(){
removeWithAnimate('#test');
});
function removeWithAnimate(id){
$(id).addClass('hide');
setTimeout( function(){
$(id).remove()
},1000);;
}
</script>
$('button').click(function() {
removeWithAnimate('#test');
});
function removeWithAnimate(id) {
$(id).addClass('hide');
setTimeout(function() {
$(id).remove()
}, 1000);;
}
#test {
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
transition: .5s;
invisible:
opacity: 0;
visible:
opacity: 1;
transition will make it appear and disappear smoothly.
I'm making a website and I want it to be just one index page. And when you land, there will be a couple rows like this and when you click a row, it will expand the information that's been hiding to the bottom so it looks like this.
Now I searched around and I found this and I essentially copied and pasted the thing onto a new file just to fool around with it but it didn't work. I added the html tags, and important the proper files and such, well my code looks like this.
//Index
<!DOCTYPE html>
<html>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="main.css" rel="stylesheet">
<script type="slide.js"></script>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>
//main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
//slide.jsvar clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
However it doesn't seem to work. What am I missing?
var clicked=true;
is commented out. Uncomment this.
Hope this helps.
I think you are looking for something like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").slideToggle('fast')
});
});
</script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
display:none; /* delete this line if you want to show your yellow div by default*/
background-color: yellow;
}
</style>
</head>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>
I am not sure how is your markup since in your previous answer you comment you have written
I just messed up when copy and pasting
Here is the complete mark up including JS and CSS
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
</style>
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
<script>
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
</script>
</body>
</html>
NOTE: I include the body , & head tag. Also please update are you referring the css and js from external file.Currently I have referring CSS and JS from same page
WORKING DEMO
Change
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> to <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> in index.html
and <script type="slide.js"></script> to <script src="slide.js"></script>
and embed your code in $(document).ready( function () { });
and Uncomment var clicked=true;
Final code will be
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="slide.js"></script>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</body>
slide.js
$(document).ready(function() {
var clicked = true;
$(".one").on('click', function() {
if (clicked)
{
clicked = false;
$(".two").css({"top": 0});
}
else
{
clicked = true;
$(".two").css({"top": "-40px"});
}
});
});
main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
I am revealing an element using a CSS transition that is triggered by a JavaScript scroll event however this transition is affecting the background color of an adjacent element in Safari (5.1.7) and Chrome (27.0.1453.93) on a Mac (10.6.8) which makes no sense at all. I think I have stumbled upon a bug.
I duplicated the issue in Safari only using the following, stripped-down code and created a jsfiddle (http://jsfiddle.net/5AEMF/) but the issue does not occur within that framework:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
margin: 0;
padding: 0;
}
#bar {
height: 100px;
background-color: #FF0000;
}
#content {
opacity: 0;
height: 9999px;
background-color: #0000FF;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#content.scrolled {
opacity: 1;
}
</style>
<script type="text/javascript">
var scrolled = false;
var init = function() {
onScroll(null);
window.addEventListener('scroll', onScroll);
};
var onScroll = function(e) {
if (window.scrollY > 0 && !scrolled) {
scrolled = true;
document.getElementById('content').className = 'scrolled';
} else if (window.scrollY === 0 && scrolled) {
scrolled = false;
document.getElementById('content').removeAttribute('class');
}
};
window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>
I wonder if there's a workaround for this issue. Any help would be greatly appreciated.
Use colors in RGB form eg: color:rgba(255, 106, 0, 0.24) the last parameter in this property 0.24 is an opacity. make it 0 and it will be transparent.