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
Related
I would like to ask everyone. I hope to make an effect. When the page is loaded, I can delay the transparency of the background for 2 seconds, and let the duck in the middle hide from the middle of the screen and slowly enlarge and appear.
But I have just learned javascript and CSS, and now I found a problem that the duck doesn't seem to be enlarged from the center point. I don't know why?
In addition, I want to trigger the animation with a delay of two seconds after the page is loaded. Is this way of writing OK? Since I'm a beginner, I don't know if this way of writing is correct?
Thanks for watching my question
let wrap = document.querySelector('.wrap');
let duck = document.querySelector('.duck');
window.onload = function() {
setTimeout(change, 1000);
// wrap.style.opacity = "0.6"
}
function change() {
wrap.style.opacity = "0.6";
wrap.transition = "1.2s";
duck.style.transform = "scale(1.6)";
}
.wrap {
position: relative;
width: 100vw;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1550757750-4ce187a65014?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.duck {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
transform: scale(1);
transform-origin: center;
transition: 1s;
}
<div class="wrap"></div>
<img class="duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png
" alt="">
Try to put the scale of duck to 0, or opacity of duck to 0 from the start, or apply css animation to .duck class. Not sure what are you trying to achieve.
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.
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
I've created a modal that slides up and down on click using CSS and jQuery.
When viewed on the desktop, it looks "OK" ish but when viewed on mobile devices, its jerky. Especially when the modal goes down.
What I am tryingt o achieve is a very smooth slide up and down. I did come across quite a few similar questions but I don't see any difference between what I am doing and what was suggested to other people to fix this issue.
The main purpose of this modal is to be used in a hybrid mobile app in phonegap. And this modal should look similar to YouTube player on iPhones.... So if you open YouTube on your mobile device, and play a video, on the top left, you will see an arrow that's pointing down. If you click/tap on that, you will see that YouTube player will get minimise. That is the sort of animation that I am trying to achieve.
This is what I have so far:
https://jsfiddle.net/zshk3nex/1/
$(document).on('click', '.tol', function() {
if ($('.hid-box').hasClass("easout")) {
$('.hid-box').removeClass("easout");
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
} else {
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
}
});
$(document).on('click', '.minifyBtn', function() {
if ($('.hid-box').hasClass("easin")) {
$('.hid-box').removeClass("easin");
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
} else {
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
}
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
}
.easin {
transition: all 0.2s ease-in;
}
.easout {
transition: all 0.6s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
Could someone please advice on this issue?
Absolute properties such at top and bottom aren't great for animations. Instead you could use transform. transform performs far better in animations and transitions.
When using percentages in transform the percentage is based on the elements box, rather than the parent, like with almost all other css values.
Another thing that could help improve performs is to narrow down your transition property. In your case you have selected to transition all properties. You could set it to only transition the properties you need. In this case that would be transition: transform 0.2s ease-in. While this won't necessarily.
Let's clean up your code a little bit.
$(document).on('click', '.tol', function() {
$('.hid-box').toggleClass("active")
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
transition: transform 200ms;
}
.hid-box.active {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
I've removed the vast majority of the jQuery you used, only toggling a single class now. I've moved the transition to the main element. I've also added a active class which simply sets the transform property to translateY(-100%). This means it will move it -100% of the elements height.
All of this should make it perform better on mobile. However at the end of the day it will also depend on the strength of your device. If it is somewhat older it might not perform as well.
I hope that helps!
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
http://jsfiddle.net/Log82brL/15/
This <img> isn't shrink wrapping as I would expect with min-width:100%
I'm trying to shrink the <img> until either height or width matches the container
Click anywhere in the <iframe> to toggle container shapes
Please try to edit the <img> CSS:
MAINTAIN ASPECT RATIO
COVER ENTIRE SURFACE AREA OF CONTAINER DIV
ONLY EDIT THE IMAGE
My question is specifically: scale an <img> to maintain aspect ratio but cover the entire surface of parent <div> even as the parent <div> resizes.
Maybe I could somehow use css flex box-layout or something? Maybe a transform?
http://jsfiddle.net/Log82brL/7/
#img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
If you don't want to touch the container, put the background on the <img>
#img {
background: url(imgpath) no-repeat center;
background-size: cover;
}
You can set HTML source to a transparent base64 pixel (credit CSS Tricks)
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
http://jsfiddle.net/Log82brL/17/
Did u try the bootstrap solution
http://getbootstrap.com/css/#images-responsive
which is pretty much
.img-responsive
{
max-width: 100%;
height: auto;
display: block;
}
Adding to your update question
http://jsfiddle.net/arunzo/Log82brL/5/
.skinny>img
{
max-width:none !important;
min-height:none !important;
max-height:100%;
-webkit-transform:translate3d(+50%, +50%, 0);
}
And still i am unsure what is that you seek, sorry for the jerky animation.
You can use CSS background instead of HTML img.
.myDiv
{
height: 400px;
width: 300px;
background-image: url('image-url.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
border: 1px solid #000000;
}
<div class="myDiv">
</div>
Here is the JS Fiddle Demo.
Try to change height and width - you will see that image stretches to fill the div.
You can also different background-size values:
Proportional stretch to contain: background-size: contain;
Too tall div
Too wide div
Proportional stretch to fill: background-size: cover;
Too tall div
Too wide div
Stretch to fill 100%: background-size: 100% 100%;
Too tall div
Too wide div
use single css background shorthand property
.myDiv
{
height: 400px;/*whatever you want*/
width: 300px;/*whatever you want*/
background: url('image-url.png') no-repeat center center;
background-size: contain;
}
<div class="myDiv">
</div>
Updated answer. Now works as intended.
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
#container {
overflow: hidden;
width: 400px;
height: 200px;
transition: all .5s;
margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
width: 200px;
height:600px;
}
#img {
height: auto;
left: 50%;
margin: auto;
min-height: 100%;
position: relative;
top: 50%;
transform: translate(-50%, -50%); /* changed to 2d translate */
width: 100%; /* full width in wide mode */
}
#container.skinny #img {
width: auto; /* width reset in tall mode */
}
<div id="container">
<img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>
http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
contained AND centered
I think this is the rendering you're trying to get, this might help ;)
https://jsfiddle.net/erq1otL4/
<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>
#container.skinny {
width: 400px;
height:600px;
}
#container {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
background-color:pink;
background-position: center center;
}
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
A while back I found a jQuery solution called "backstretch". Now this looks possible with CSS3:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
Usually to achieve that you need to use:
parentdiv img {
width:100%;
height:auto;}
in order to make your image resize with the parent div.
This can cause some cropping issues (visually) if you set the overflow to hidden.
Try this:
<div class="img_container">
<img src="image/yourimage.jpg" alt="" />
</div>
<style type="text/css">
.img_container{
width: 400px;
height: 400px;
overflow: hidden;
}
.img_container img{
width: 100%;
height: auto;
}
</style>
setting the height or the with auto will not make the image look stretched.
Use this class of Bootstrap .img-responsive and if parent div changes add media Queries to image and div both
Here is a very simple CSS solution that does not require changing the attributes of an img tag.
div{
background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
height: auto;
width: 400px;
overflow: hidden;
background-size: cover;
background-position: center;
}