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.
Related
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
I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}
As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
I have a image button:
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
and i want to show a loading animation on button(not whole page),when clicked.
i tried with a gif image, when clicked on button it showed but not exactly on button.
To show overlapping elements, a common approach is to use absolute (or fixed) positioning. To show the loader, placed above your img element, you can follow these steps:
Wrap your img element in a wrapper div and give this div position: relative. absolute position will also serve our purpose but that is more likely to affect your current layout.
Now, inside your wrapper div, add another div that will contain the loading animation (which may be a gif, or contain any other animation structure). Place this loader over your img element using absolute positioning and place it as per your requirements.
// bind click event
// you can use any event to trigger this
document.querySelector("#show-loader").onclick = function(){
document.querySelector(".loader-wrapper").className = "loader-wrapper loading";
};//
.loader-wrapper{
display: inline-block;
position: relative;
}
.loader-wrapper .loader{
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.loader-wrapper.loading .loader{
display: block;
}
.loader-wrapper .loader span{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
animation: zoom 1s ease infinite;
}
#keyframes zoom{
0%{ transform: scale(1);}
50%{ transform: scale(2);}
100%{ transform: scale(1);}
}
<div class="loader-wrapper">
<input type="image" src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png">
<div class="loader">
<span></span>
</div>
</div><!--#wrapper-->
<br />
<button id="show-loader">Show loader</button>
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
I'm trying to center a div relative to another div which has a background image positioned as cover.
html:
<div id="back">
<div id="box">
<p>test 1</p>
<p>test 2</p>
<p>test 3</p>
</div>
</div>
css:
#back{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/White_square_in_purple_background.svg/450px-White_square_in_purple_background.svg.png');
background-repat: no-repeat;
background-position: 50%;
background-size: cover;
}
#box{
position: absolute;
top:10%;
left: 20%;
bottom: 10%;
right: 20%;
background: red;
}
here's a fiddle:
http://jsfiddle.net/8x7tgrqm/
I'm trying to center the red div always inside the white box in background at different screen sizes. Try to resize the window to see what I mean.
I was wondering if there is a way in CSS or even JS to have the box always centered into the background white box.
thanks
Here is a solution using the awesome vmax unit:
http://jsfiddle.net/x5m3w40o/2/
#box{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width:57vmax;
height:57vmax;
background: red;
}
You probably need to adjust the 57 vmax value to something like 58-59 to make it completely cover the white rectangle in this particular case.