i have implemented a button which should change the background color, into blue from black.
But i didnt find a easy way, how I can do that.
This is my HTML file
<div style="background-color: #161624; width: 100%; height: 20%; "></div <div style="background-color: #efece7; width: 100%; height: 60% "> </div> <div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom ; "</div>
<button id="changecolor">Change Color</button>
</div>
I want that the button changecolor, change the background color, where the height is 20% at both.
enter image description here
The blueblack color should change
I would recommend using a seperate css file for this with classes of colors and designs depending on dark/light mode.
simply add a css class of example down below and add some javascript to be able to change the class on the button or element you want to use as the switch.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
<body>
currently this is just pointing to the body but can easily be adjusted to point at any element you would like it to
Just let me know if you have any questions
I have the following:
As you can see, there is some css that needs to change the image when a user hovers over it.
.dashboard-card-content:hover .right-arrow a {
background-color: #29b1e9;
}
.dashboard-card-content:hover .right-arrow a svg path {
stroke: #fff;
}
<div class="white-container dashboard-card-content">
<div class="gLoader-img">
<img src="assets/images/comp-switch-logo2.png" alt="">
</div>
<div class="gloaderSvg-wrapper"></div>
<div class="dashboard-card-header-content">
<h5>Policy Maintainance</h5>
</div>
<div class="dashboard-card-footer-content">
<div class="right-arrow">
<a href="#">
<img src="assets/images/right-icon.svg" class="svg" alt="">
</a>
</div>
</div>
</div>
The normal state is as desired.
The on hover state is not as desired. It is making the buttons background light blue as desired, but it does not make the arrow white.
This is the desired look on hover.
Question
How do I change the above htlm/scss to allow the image to turn white when a user hovers over it?
i think there is no way to do that with color and you can use ways like this below
.icon {
display: inline-block;
width: 70px;
height: 70px;
background-size: cover;
}
.icon-arrow {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg);
}
.icon-arrow:hover,
.icon-arrow:focus {
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
<div>
<span class="icon icon-arrow"></span>
</div>
Use object tag instead of img tag.
This is one of example.
.svg {
display: inline-block;
width: 70px;
height: 70px;
background-size: cover;
}
.svg:hover {
filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
<object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" class="svg">
Bike
</object>
You should try playing with the fill css attribute. This will work on your arrows as I think they are shapes. This is the SVG counterpart to background-color. You might need to use classes or identifiers in the SVG to target only the arrows...
If that does not work, better show us the SVG so we can help a bit more.
So, I currently have an image that is 400x400 pixels. When scaled externally to 200x200 it looks pixilated. I've therefore added it to Wordpress as 400x400 but scaled it down as follows:
However, I'm now trying to add an onmouseover event, with the scaled down image.
It works fine for the normal image, like this:
https://y.png'" onmouseout="this.src='https://x.png'" />
But if I try and scale the image, as follows, it doesn't work:
https://y.png' width="200" height="200"" onmouseout="this.src='https://x.png'" />
Please note I've left the source of the image out and replaced with 'x' and 'y'.
Does anyone know how to resolve this please?
Thanks all.
You could use the :before pseudo selector to show a background image. This will let you shrink down the 400x400 image in CSS. Run this and hover over the element.
.item {
position: relative;
overflow: hidden;
display: inline-block;
}
.item:hover:before {
content: "";
background-image: url(http://placehold.it/400x400);
background-size: 200px;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<a href="#" class="item">
<img src="http://placehold.it/200x200/8B0AB3/ffffff" />
</a>
You should be able to accomplish this without JavaScript.
Here's a Codepen demo: http://codepen.io/hellojason/pen/GZjpQE
In CSS:
img {
width: 200px;
transition: width 1s;
}
img:hover, img:focus {
width: 400px;
}
<img src="http://placehold.it/400x400" />
Is this what you're after?
Two way for this task you can use
First way using Javascript.
Script :
function bigImg(x) {
x.style.height = "400px";
x.style.width = "400px";
}
function normalImg(x) {
x.style.height = "200px";
x.style.width = "200px";
}
Html :
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://placehold.it/400x400" alt="Smiley" width="32" height="32">
You can call your own function from onmouseover or onmouseout function.
Second way using CSS :
CSS :
#image{
width:200px;
height:200px;
}
#image:hover{
width:400px;
height:400px;
}
Html :
<img border="0" src="http://placehold.it/400x400" alt="Smiley" id="image">
This question already has answers here:
Creating a hole in a <div> element
(10 answers)
Closed 7 years ago.
So say I have the following HTML structure:
<canvas></canvas>
<div class="overLay">
<button>Click me!</button>
</div>
The canvas is absolutely positioned with a negative z index, so the overlay is positioned over it (I have that much working). The issue is that I want the overlay div to have a white background, but the button to have a transparent background and show through to the canvas/body background color.
background-color:rgba(0,0,0,0);
doesn't work because it just shows the white background behind it. Any ideas on how to accomplish this effect?
The question this may have been marked as a potential duplicate of fails to account for the fact that buttons can have properties such as border-radius and offers no suitable solutions.
There's no way to create a hole inside an HTML element. A Transparent background can only be applied to an element that does not descend from a parent that has a non-transparent background.
What you could do, thought it's a little bit more complicate, is to create divs around your button, at it's same level, as siblings. Give those divs a white background, and then your transparent button should work.
I've created a sample using a table layout, where the button remains in the middle row, in the center cell. See that the button reveals the canvas background color:
canvas {
width: 200px;
height: 200px;
background: purple;
position: absolute;
z-index: -1;
}
.overLay {
width: 200px;
height: 200px;
display: table;
}
.overLay button {
background-color: Transparent;
white-space: nowrap;
}
.overLay > div {
display: table-row;
}
.overLay > .middle {
height: 1px;
}
.overLay > div > div {
display: table-cell;
text-align: center;
}
.overLay > .middle > div:nth-child(2) {
width: 1px;
}
/* Now, set the background on the divs around the button */
.top, .left, .right, .bottom {
background: white;
}
<canvas></canvas>
<div class="overLay">
<div class="top">
<div></div>
<div></div>
<div></div>
</div>
<div class="middle">
<div class="left"></div>
<div>
<button>Click me!</button>
</div>
<div class="right"></div>
</div>
<div class="bottom">
<div></div>
<div></div>
<div></div>
</div>
</div>
Since in my original answer, you pointed the intention of using a border radius. So there's another approach to make this possible.
Based on this asnwer
Make the overlay with a gradient radius background, that creates the gradient color center in the position where you want the button to be, at the button's size. Make the outer color as white, and the inner color as Transparent;.
Then, set your button's position. (I did this by centering it in a table layout):
canvas {
width: 200px;
height: 200px;
background: purple;
position: absolute;
z-index: -1;
}
.overLay {
width: 200px;
height: 200px;
display: table;
background-color: white;
background: -webkit-radial-gradient(50% 50%, circle, transparent 25px, white 0px);
background: radial-gradient(50% 50%, circle, transparent 25px, white 0px);
}
.overLay > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
button {
background-color: transparent;
border-radius: 50%;
width: 50px;
height: 50px;
position: relative;
}
<canvas></canvas>
<div class="overLay">
<div>
<button>Click me!</button>
</div>
</div>
Mmm..., have you thought about using an SVG element with a mask. That should do the trick. Take a look at the snippet.
body {
padding: 0;
margin: 0;
}
.your-canvas {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
button {
width: 150px;
height: 100px;
background-color: transparent;
color: white;
cursor: pointer;
}
<div class="your-canvas">
<img width="512" alt="Weingarten Kuppel 8" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Weingarten_Kuppel_8.jpg/512px-Weingarten_Kuppel_8.jpg"/>
</div>
<svg height="324" width="512">
<defs>
<mask id="mask">
<rect width="512" height="324" fill="white"/>
<rect x="181" y="112" width="150" height="100" fill="black"/>
</mask>
</defs>
<rect width="512" height="324" style="fill:rgba(255,0,0,.6);" mask="url(#mask)"/>
<foreignObject class="node" x="181" y="112" width="150" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<button>Click Me</button>
</body>
</foreignObject>
</svg>
As far as i know it is even possible to use masking in pure css, but haven't had the time to look it up. Here is some information on using masks with svg Clipping and masking.
Have fun.
You could...
Reduce a canvas element to button size (== a button-canvas!),
Use CSS to position the button-canvas as desired over the div,
Add a click event listener on the canvas,
Draw whatever design you need on the button-canvas.
This way you have complete flexibility using the amazing drawing tools available with the canvas element.
Here's example code and a (fanciful) Demo.
While this demo is just for fun, you can easily restyle this example & turn it into a reusable widget:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var width=80;
var height=40;
var borderwidth=4;
var x=0;
var y=0;
x+=borderwidth;
y+=borderwidth/2;
var w=width-borderwidth-borderwidth;
var h=height-borderwidth;
var depth=5;
//
var stopCount=8;
var angle=0;
var angleDelta=360;
//
var labelColor='black';
canvas.width=width;
canvas.height=height;
requestAnimationFrame(animate);
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseUp(e);});
function makeGradient(){
var g=ctx.createLinearGradient(0,0,cw,0);
for(var i=0;i<stopCount;i++){
var stop=i/stopCount;
var hslDegrees=(angle+angleDelta*stop)%360;
var hsl="hsl(" + hslDegrees + ",100%, 50%)"
g.addColorStop(stop,hsl);
}
return(g);
}
function animate(){
ctx.clearRect(0,0,cw,ch);
gradientBorder();
ctx.font='12px verdana';
ctx.fillStyle=labelColor;
ctx.fillText('Click Me',x+10,y+25);
angle++;
requestAnimationFrame(animate);
}
//
function gradientBorder(){
var lw=ctx.lineWidth
var ss=ctx.strokeStyle;
ctx.lineWidth=borderwidth;
ctx.strokeStyle=makeGradient();
//
ctx.beginPath();
ctx.moveTo(x+w-depth,y);
ctx.lineTo(x+depth,y);
ctx.bezierCurveTo( x-depth/2,y+h*1/6, x+depth*2,y+h*2/6, x,y+h/2);
ctx.bezierCurveTo( x+depth*2,y+h*4/6, x-depth/2,y+h*5/6, x+depth,y+h);
ctx.lineTo(x+w-depth,y+h);
ctx.bezierCurveTo( x+w+depth/2,y+h*5/6, x+w-depth*2,y+h*4/6, x+w,y+h/2);
ctx.bezierCurveTo( x+w-depth*2,y+h*2/6, x+w+depth/2,y+h*1/6, x+w-depth,y);
ctx.closePath();
ctx.stroke();
//
var b2=borderwidth/2;
ctx.beginPath();
ctx.moveTo(x+w-depth-1,y+b2);
ctx.lineTo(x+depth+2,y+b2);
ctx.bezierCurveTo( x-depth/2+b2+2,y+h*1/6+1, x+depth*2+b2,y+h*2/6, x+b2+1,y+h/2);
ctx.bezierCurveTo( x+depth*2+b2,y+h*4/6+1, x-depth/2+b2+1,y+h*5/6, x+depth+b2-2,y+h-b2);
ctx.strokeStyle='#666';
ctx.lineWidth=0.50;
ctx.moveTo(x+depth+b2-2,y+h-b2);
ctx.lineTo(x+w-depth-2,y+h-b2);
ctx.bezierCurveTo( x+w+depth/2-b2-2,y+h*5/6, x+w-depth*2-b2+1,y+h*4/6, x+w-b2-2,y+h/2);
ctx.bezierCurveTo( x+w-depth*2-b2+1,y+h*2/6, x+w+depth/2-b2-2,y+h*1/6, x+w-depth-b2+3,y+b2);
ctx.strokeStyle='#666';
ctx.lineWidth=0.50;
ctx.stroke();
//
ctx.strokeStyle=ss;
ctx.lineWidth=lw;
ctx.fillStyle='gainsboro';
ctx.fill();
}
function handleMouseDown(e){ labelColor='red'; }
function handleMouseUp(e){ labelColor='black'; }
body{ background-color:white; }
.demo{
width:200px;
height:100px;
border:1px solid red;
position:relative;
}
#canvas{
position:absolute;
left:10px;
top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='demo'>
<canvas id="canvas"></canvas>
</div>
I'm trying to create the following:
Using two images: one as mask (the diagonal lines) and the other the image and text themselves (the mask and image+text are the same size):
..and I just can't get it done!
I've tried all combinations with divs and z-indeces, opacity and background-image.. (should mention I'm noob to html).
Here's one shot I got at it (with only the mask and an image):
div {
position: absolute;
top: 775px;
left: 0px;
height: 188px;
width: 272px;
background-image: url('grey-out.png');
}
img {
z-index: 1000;
}
<div></div>
<img src="41_large.png" />
Which just gives the diagonal lines themselves..
Can someone please help me out?
How do I make that "disabled" look combining the (semi-transparent) mask and the div?
Thanks!
This approach works:
<div id="pspThing" class="disabled">
<img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>
#pspThing {
background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
height: 93px;
width: 273px;
border: 1px solid #000;
margin: 0 auto;
overflow: hidden;
}
#pspThing img {
display: none;
opacity: 0.5;
}
#pspThing img.disabled {
display: block;
}
JS Fiddle demo
Bearing in mind that there's no transparency in your striped png (so far as the imgur hosted image is concerned, anyway, so I'm using opacity instead). Also the JS Fiddle demo's a little more complicated than necessary, so's I could show the disabled/enabled states.
Pleass consider this simple snippet. Very universal solution. Acts and feels very much like the 'disable' attribute of input elements. See the snippet
function disable(elementId, enabling) {
el = document.getElementById(elementId);
if (enabling) {
el.classList.remove("masked");
} else
{
el.classList.add("masked");
}
}
.masked {
position: relative;
pointer-events: none;
display: inline-block;
//visibility:hidden; /* Uncomment this for complete disabling */
}
.masked::before {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: visible;
opacity: 0.5;
background-color: black;
//background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this to use the image */
content: "";
}
<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<br/>
<button onclick="alert('Sample button was clicked.')">Maskakable</button>
<button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
<img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>
<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);" class="masked">Disable</button>
I built an example here.
I doubt that the position:absolute approach is the best way to handle this since you need to know the size of the image.
For doing it by z-index your both images should be in the container with img tag.