Develop Reference

How do you create a zoom effect without using transform:scale()?

I have a background-image with a button in the center. When I press the button, I want to zoom in on the background-image. When it's zoomed in I'm creating multiple charts using chartist.js. For a while now I've had the problem that the chart isn't registering the width and height I have assigned to it and I have finally figured out that it's the zoom effect causing the problem. I have no idea why this happens and I would like to find a different way than using transform:scale() to create the zoom effect. Any help would be appreciated!

The transform property changes the object without redrawing the page, which is a great performance boost since it reduces all the layout computations. If you don't want to use it, you can try the 'background-size' property.
First, set up your background image in css to have separate properties:
<div class='bg-img'></div>
<style>
.bg-img{
background-image: url(www.img.com/img.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size:100%;
width: 200px;
height:200px;
}
</style>
Then use javascript to change the background-size
<script>
function zoomit() {
document.querySelector('.bg-img').style.backgroundSize = "200%";
}
</script>

you can try it by increasing the width
let btn = document.querySelector(".btn");
let image = document.querySelector(".image");
btn.addEventListener("click", function(e){
image.classList.add("zoom");
});
.img {
position: relative;
width: 200px;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
transition: width 0.1s linear;
}
.btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.zoom {
width: 120%;
}
<div class="img">
<img class="image" src="https://i.picsum.photos/id/222/536/354.jpg?hmac=0F40OROL8Yvsv14Vjrqvhs8J3BjAdEC8IetqdiSzdlU" alt="">
<button class="btn">CLICK</button>
</div>
Working Fiddle

Show only half of SVG

I'm showing my SVG image in the card
<div class="card-image">
<img src="/images/linux.svg" />
</div>
I couldn't upload the SVG file here, but what I'd like to do is: (After an event is triggered)
Show the full original SVG in the beginning, but when an action is taken, only left or right half of the SVG image is shown in color, but the other half is in grayscale.
I want to be able to adjust the rotation so that I can choose the angle at which the image is grayed out.
Can someone point me to the right direction?

You can set a pseudo element on the container, and set a gradient to this pseudoelement that is transparent for half of it, a gray for the other half. The linear gradient can be set at the angle the you want
.card-image {
width: 200px;
height: 300px;
display: inline-block;
position: relative;
}
.grayed:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: 9;
background-image: linear-gradient(110deg, transparent 50%, #888a 50%);
}
<div class="card-image">
<img src="http://placekitten.com/200/300" />
</div>
<div class="card-image grayed">
<img src="http://placekitten.com/200/300" />
</div>
.card-image {
width: 600px;
height: 400px;
display: inline-block;
position: relative;
overflow: hidden;
}
.grayed:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
left: 50%;
top: -50%;
z-index: 9;
background-color: white;
mix-blend-mode: color;
transform: rotate(30deg);
transform-origin: left center;
animation: rotate infinite 10s linear;
}
#keyframes rotate {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
<div class="card-image grayed">
<img src="http://placekitten.com/600/400" />
</div>

You can use CSS to add linear gradients on images.
background-image:
linear-gradient(to bottom, rgba(x, y , w, z ), rgba(a, b, c, d)),
url('image.jpg');
You could then use javascript to modify the style in the class, this could allow you to change properties such as colors, however, I am not exactly sure which property would control where the gradient start, but it's a good pointer if you need one. If you can find a way to select where the gradient start (in relation to, an offset for example, or maybe specific height) you could then have it be black and white and use JS to modify the position/color.

Diagonally split/combine div/image with CSS

I'm trying to achieve something like the following:
The diagonal split should go from the top right corner to the bottom left corner, at an exact angle so that both sides are totally equally proportioned.
I found an example online, but it was for wide aspect images, while trying to modify it to fit my 1:1 ratio purpose, I can't seem to get the bottom image to line up properly, but the top one works fine.
The diagonal split is also off-center, and the yellow background is there to show the area that should be filled by the lower image. The lower image should be the same size as the top one, just with the bottom half instead of the top half showing.
I have created a fiddle to demonstrate: https://jsfiddle.net/uxuv17at/2/
HTML
<div class="split-image-container">
<div class="split-image-bottom">
<img src="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" alt="Just Another Clan" title="Just Another Clan" />
</div>
<img src="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" alt="ExtraordinaryKillers" title="ExtraordinaryKillers" />
</div>
CSS
.split-image-container{
height: 300px;
width: 300px;
overflow: hidden;
position: relative;
border: 1px solid black;
padding: 0;
background-color: green;
}
/*Rotate this div and position it to cut the rectangle in half*/
.split-image-bottom{
transform: rotate(315deg);
position: absolute;
top: 85px;
left: 70px;
overflow: hidden;
height: 350px;
width: 350px;
background: yellow;
}
/*Apply exact opposite amount of rotation to the .image2 class so image appears straight */
/*Also align it with the top of the rectangle*/
.split-image-bottom img{
transform: rotate(45deg);
position: absolute;
top: -50px;
left: 15px;
}

CSS Only
Pure CSS solution using the clip-path property. Browser support is pretty bad though.
.split-image-container{
height: 300px;
width: 300px;
position: relative;
}
img{
width:100%;
height:100%;
position:absolute;
}
.clip{
-webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
<div class="split-image-container">
<img src="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" alt="Just Another Clan" title="Just Another Clan"/>
<img src="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" alt="ExtraordinaryKillers" title="ExtraordinaryKillers" class="clip"/>
</div>
SVG
This one uses the svg clippath. Browser support should be a lot better.
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<clipPath id="clipPolygon">
<polygon points="100 0,0 100,100 100">
</polygon>
</clipPath>
<image viewBox='0 0 100 100' preserveAspectRatio='none' height="100" width="100" xlink:href="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" />
<image viewBox='0 0 100 100' preserveAspectRatio='none' height="100" width="100" clip-path="url(#clipPolygon)" xlink:href="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" />
</svg>

How to put a diagonal line over a textbox in CSS?

Sorry about not having an example, but basically I want to give an effect of having a text box crossed out, like being cancelled, etc.
Anyone got any ideas?

Alternatively, here is a pretty solution using SVG lines (no JS), which automatically scales to the dimensions of your text-area. It can also be applied over img elements for example.
JSFiddle: http://jsfiddle.net/xbbzcsrk/
HTML:
<div class="crossed">
<textarea>This is a test</textarea>
<svg>
<line x1="0" y1="100%" x2="100%" y2="0" />
<line x1="0" y1="0" x2="100%" y2="100%" />
</svg>
</div>
CSS:
.crossed {
position: relative;
width: 200px;
height: 80px;
}
.crossed svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.crossed svg line {
stroke: rgb(255, 0, 0);
stroke-width: 2;
}
.crossed textarea {
width: 100%;
height: 100%;
box-sizing:border-box;
}

Here's another possible method, this one using the HTML5 canvas element to draw an 'x' over the textarea.
http://jsfiddle.net/rmqJf/
Since I started working on it a bunch of other, answers popped up, some of them pretty similar. Lots of options to go with!
I place the textarea directly on top of the canvas (of the same size), then use rgba() with alpha 0 on the background of the textarea to make the background transparent so you can see the canvas underneath.
Looking through these though, I'm inclined to feel like the background image solution suggested by #Ragnarokkr and sussed out by #kalpesh patel may be the simplest solution, if executed right.
The code for mine:
HTML:
<canvas id="myCanvas" width="200" height="100"></canvas>
<textarea id="myTextArea"></textarea>
JS:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
CSS:
html, body {
margin: 0;
padding: 0;
}
#myCanvas {
padding: 0;
margin: 0;
width: 200px;
height: 100px;
}
#myTextArea {
position: absolute;
left: 0px;
right: 0;
height: 102px;
width: 202px;
background: rgba(255,255,255,0);
padding: 0;
margin: 0;
}

Adding this one as a new answer because I think it works better than my initial response:
http://jsfiddle.net/QrLLA/
only a few lines of code this time.
The HTML:
<textarea id="myTextArea"></textarea>
The CSS:
#myTextArea {
display: block;
background-image: url('http://i.imgur.com/4zKm6.png');
background-size: 100% 100%;
width: 200px;
height: 100px;
}
Just uses a image of an 'x' that I made in MS Paint as the background image for the textarea; the background-size: 100% 100%; property allows for re-sizing.
Screenshot:
This still enables the textarea to be written in; I'm not sure if that would be desired behavior in your case or not.

the screenshot:
html
<div class="con">
<div class="input-con"><input type="text" value="text example" /></div>
<div class="strip top-bottom"></div>
<div class="strip bottom-top"></div>
</div>
css
.con {
position: relative;
}
.strip {
margin-left:2px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
border-width: 0 0 1px 0;
border-color: red;
border-style: solid;
width: 145px;
transform-origin:top left;
-ms-transform-origin:top left;
-moz-transform-origin:top left;
-webkit-transform-origin:top left;
}
.top-bottom {
margin-top: 2px;
transform:rotate(8deg);
-ms-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-webkit-transform:rotate(8deg);
}
.bottom-top {
margin-top: 1.2em;
transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
}
.input-con > input {
line-height:1.2em;
width:146px;
}

You could create an image (one diagonal line) and set the textbox's background with that image (horizontally repeating if you want):

You can try out this:
Markup:
<div class='canceled_input_container'>
<input type='text'/>
<span></span>
</div>
CSS:
div.canceled_input_container {
position:relative;
height:30px;
}
div.canceled_input_container span{
position:absolute;
background-image: url("/path/to/image");
background-repeat: no-repeat;
height:/*background image height*/
width:/*background image width*/
top:-15px;
z-index:1;
}
This is just to guide you and does not contain final solution, you have to set position and other properties as per your requirement.

Well, this is will work in most browsers:
Empty: ☐ &#9744 ;
Checked: ☑ &#9745 ;
Disabled: ☒ &#9746 ;
Add colors to make it looks even more disabled.

http://jsfiddle.net/tylerbrownhenry/NRHY5/
Here you go. For the markup...
<input type='text'/>
Then using jquery, you can either make this a function or a callback, but this is what you should run to add the 'X' to the input field. I'm just using 'input' as the selector but you can change it to fit your need.
I just wrapped the input with a div, and then put another div inside that div. The z-index of the child div should be higher than the input field, so that it will lay on top.
var input = $('input'),
divWidth = input.width();
input.wrap('<div class="ex" style="width:'+divWidth+';"></div>').before('<div class="exMark exImage"></div>');
Then I don't want to post the entire css that was in the jsFiddle. Because I used a dataUri so I didn't have to upload an an image, but you can just make the background-image whatever 'X' image you want.
.ex{
z-index:10000;
width:0px; /* This will get overwritten by the javascript */
}
.exMark{
width:150px;
z-index:1000;
height:2px;
position:absolute;
}
.exImage{
position:absolute;
width:150px;
height:50px;
background-repeat:no-repeat;
background-image:url('x.jpg');
}
Hope that helps!

<hr id="linethru" width="100%" color="black" >

How do you click through transparent PNGs in IE9?

So I would like to have a clickable area beneath a transparent PNG.
I have a 200x200px PNG image laying on top of a 200x300px div. The div is salmon colored. Only the 100px to the right of the div are clickable.
jsFiddle here: http://jsfiddle.net/xhAVU/1/
In modern browsers: By uncommenting pointer-events: none; you can see how the PNG gets ignored and the salmon div can be clicked on anywhere.
In IE9: No way to click through the image.
Is there a way to force IE9 to click through transparent PNGs?

Dup of https://stackoverflow.com/a/10968016:
Replace
<img width="200" height="200" style="pointer-events: none" src="...">
with
<svg width="200" height="200" pointer-events="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="200" height="200"
xlink:href="..." />
</svg>
as IE supports the SVG pointer-events property.

Did you tried sending png image back using a low z-index value lets say 10 and bringing the click able area up using high z-index value lets say 20.
This might work. look below code.
.container {
width: 500px;
height: 500px;
background-color: #eeeeee;
}
.container img {
width: 200px;
height: 200px;
position: absolute;
z-index:10;
/* pointer-events:none; */
}
.clickable {
width: 300px;
height: 200px;
background-color: salmon;
cursor: pointer;
z-index:20;
}

If the PNG file could be moved into CSS, then I find that you could implement it this way in all browsers:
http://jsfiddle.net/CkmH6/
With CSS:
.container {
width: 500px;
height: 500px;
background: #eeeeee;
}
.overlay {
background: url(http://ima.gs/transparent/none/36f/transparent-png-200x200.png) no-repeat;
width: 200px;
height: 200px;
position: absolute;
}
.clickable {
width: 300px;
height: 200px;
background-color: salmon;
cursor: pointer;
}
​