I am not sure if this is a simple task to accomplish but I've had no success so far.
Let me explain the problem a little so that you understand what's going on.
The body element contains one div which contains a background that covers the entire window. I want this very big div to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible div the parent would zoom from there.
This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.
Here's some code.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
</script>
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
transition: transform .2s;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
}
Thanks a lot in advance!
-> please update css into your css file
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: Arial, Tahoma;
font-size: 12px;
}
.indexPage {
background: url("map.jpg");
width: 100%;
height: 100%;
background-size: cover;
position: fixed;
}
.indexPage > .indexInvisible {
width: 80%;
height: 80%;
background: black;
margin: 5% auto 0 auto;
overflow: hidden;
transition: transform .2s;
-webkit-transition: transform .2s;
-moz-transition: transform .2s;
-ms-transition: transform .2s;
}
.indexPage:hover .indexInvisible {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="indexPage" class="indexPage">
<div id="indexInvisible" class="indexInvisible"></div>
</div>
</body>
</html>
Use a background-image:inherit on the inner div and leverage background-size on hover.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.map {
width: 860px;
height: 480px;
background-image: url(https://www.homesinc.com/wp-content/uploads/2017/05/1.jpg);
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
;
}
.zoomer {
width: 80%;
height: 80%;
background: inherit;
border: 3px solid blue;
background-size: 125% 125%;
transition: background-size .5s ease;
background-position: center center;
}
.zoomer:hover {
background-size: 150% 150%;
}
<div class="map">
<div class="zoomer"></div>
</div>
Related
could you please maybe take a look into this?
I have this code:
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<div class="obrazek"></div>
</div>
</body>
</html>
CSS:
.header {
width: 800px;
height: 500px;
background-color: rgb(218, 124, 124);
overflow: hidden;
position: relative;
display: flex;
}
.obrazek {
display: flex;
padding: 25px;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: top 0.3s ease-out, right 0.3s ease-out, bottom 0.3s ease-out,
left 0.3s ease-out;
}
.obrazek:hover {
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
}
Codepen:
Codepen link
I want this picture to be smaller on hover. It is working but only for top, bottom and left but the right side is staying the same (I mean it doesn't change its position on hover on the right edge).
Do you have maybe any idea how to fix this and what I did wrong?
Thank you in advance!
Try this:
.header {
width: 800px;
height: 500px;
background-color: rgb(218, 124, 124);
overflow: hidden;
position: relative;
display: flex;
}
.obrazek {
display: flex;
padding: 25px;
width: 100%;
background-image: url(https://images.unsplash.com/photo-1667857399206-dc6d15189adc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
background-size: cover;
transition: 0.3s ease-out;
}
.obrazek:hover {
-ms-transform: scale(0.94, 0.9); /* IE 9 */
-webkit-transform: scale(0.94, 0.9); /* Safari 3-8 */
transform: scale(0.94, 0.9);
}
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
<div class="obrazek"></div>
</div>
</body>
</html>
i use firefox as default browser and i never had problem with animations and css in general everything worked fine, but i noticed that in chrome if i have hover effect that has more than one animation, in chrome animations happen in order instead of simultaneously. how can i fix that problem? also the input slider i tried to make it vertical ( works fine in firefox but in chrome it doesn't work at all.
here is the github pages of the page
* {
box-sizing: border-box;
user-select: none;
}
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #bf42f5;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
canvas {
opacity: 0;
touch-action: none;
animation: fade-in 1s ease 0.5s forwards;
}
.nav{
position: fixed;
opacity: 1;
z-index: 10;
top: 0px;
left: 0px;
min-width: 100%;
}
.nav-list{
list-style: none;
font-size: 1.6rem;
font-family: 'Courier New', Courier, monospace;
color: #f0f0f0;
display: flex;
justify-content: center;
padding: 0;
}
.nav-list>li{
padding-right: 10px;
opacity: 0.8;
}
.nav-list>li:hover{
transition: all 0.4s ease;
opacity: 1;
cursor: pointer;
scale: 1.11;
padding-bottom: 100px;
}
#media (max-width:480px) {
.nav-list{
flex-direction: column;
align-items: flex-end;
/* transform: translateX(1000px); */
}
.nav-list>li{
padding-left: 5px;
}
.nav-list>li:hover{
padding-top:5px;
padding-bottom:5px;
padding-left: 15px;
scale: 1.05;
}
}
/*slider*/
.boring-text{
position: fixed;
left: 5%;
top: 25%;
}
.boring-text>h1{
font-size: clamp(2rem, 10vw, 5rem);
font-family: 'Sono', sans-serif;
color: #ffffff9a;
pointer-events: none;
font-weight: 200;
max-width: 5ch;
}
.boring-text>h3{
font-family: 'Marhey', cursive;
color: #ffffff92;
position: fixed;
right: 10px;
bottom: 5%;
}
.boring-text>h4{
font-family: 'Sono', sans-serif;
color: #ffffffba;
}
.slider-wrapper{
position: fixed;
right: 20px;
bottom: 10%;
}
.slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
-webkit-appearance: none;
width: 5px;
height: 255px;
background: #d3d3d3;
outline: none;
opacity: 0.5;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 0.8;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #ffffff;
cursor: pointer;
border-radius: 50%;
}
/*slider*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Marhey:wght#300;400&family=Sono:wght#200;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>LandingPAGE</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class='nav'>
<div class='nav-wrapper'>
<ul class='nav-list'>
<li>Shop</li>
<li>Work</li>
<li>
apple{/* <FontAwesomeIcon icon="apple" /> */}
</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class='boring-text'>
<h1> boring landing pages</h1>
<h3> phones: {val}</h3>
<h4> React - Three</h4>
<div class='slider-wrapper'>
<input type="range" orient="vertical" min="1" max="50" value='10' class='slider' />
</div>
</div>
</div>
</body>
</html>
About the slider you can check this answer, it may help you.
About the animations I'm waiting for further information as I reproduce it on your snippet I'm seeing it working well and concurrently.
* {
box-sizing: border-box;
}
.btn-option {
width: 330px;
padding: 12px 24px;
margin: auto;
border-radius: 8px;
background-color: transparent;
color: #4c4c4c;
visibility: visible;
border: 1px solid #d2d2d2;
text-transform: capitalize;
font-weight: 500;
letter-spacing: 1px;
font-family: "Lato", sans-serif;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
/* transition */
transition: filter 0.3s ease 0.3s;
}
.survey-checkbox {
position: relative;
}
.survey-checkbox::before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background: #efefef;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.option-container {
margin: auto;
display: flex;
flex-direction: column;
row-gap: 20px;
flex-wrap: wrap;
}
#media only screen and (max-width: 768px) {
.btn-option {
width: 280px;
}
}
.btn-option:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}
.btn-option:active {
background: #fcece8;
border: 1px solid #e76943;
}
.btn-option:active .survey-checkbox::before {
background-color: #e76943;
}
.btn-option:not(:active) {
transition: all 1000ms step-end;
}
.survey-checkbox::before:active {
background-color: #e76943;
}
.btn-option:active {
animation: all 1s forwards linear;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>Document</title>
</head>
<body>
<div
class="btn btn-option">
<span>Good</span><input type="checkbox" class="survey-checkbox" />
</div>
</body>
</html>
Guys I want to Animate the Checkbox on clicking the parent div right now the problem is as I'm clicking on the parent div it's working fine as expected but the checkbox is working till the active state is there how can I make it transition same like the div.
To make the Div animate on active state I followed an article
This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 1 year ago.
I was learning from youtube and I ended up at transition bcs of my problem with one.
Any delay or duration is not workig and I don't know why. I really want to know what is a reason of executing this problem. I'm kinda of new in that stuff. :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::AFTER & :: BEFORE</title>
<link rel="stylesheet" href="style.css">
<script>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
p::before {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition: all ease-in-out 250ms;
}
p::after {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
}
p:hover::before,
p:hover::after {
width: auto;
}
</script>
</head>
<body>
<p>Here is some content</p>
</body>
</html>
First off, you need to include your css in a style tag if you need to inline it. Also, when you use width: auto, it will just have the browser calculate a width and set it for you. You are best off just setting the width to 100% and it will try to take up the whole space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::AFTER & :: BEFORE</title>
<link rel="stylesheet" href="style.css">
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
p::before {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition: all ease-in-out 250ms;
}
p::after {
content: "";
background-color: red;
display: block;
width: 10px;
height: 10px;
transition-property: width;
transition-delay: 1s;
transition-duration: 2s;
}
p:hover::before,
p:hover::after {
width: 100%;
}
</style>
</head>
<body>
<p>Here is some content</p>
</body>
</html>
I'm trying to apply CSS transform property to two elements(Parent and child) But the problem is when i adding transform to parent then it affects child positioning.
An Example:
$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});
$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}
.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}
.topbar.transform {
transform: translateY(0);
}
.dropdown {
background: #ddd;
height: 100%;
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}
.dropdown.-isOpen {
transform: translateY(0%);
}
.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>
</body>
</html>
When you add transform: translateY(0); to the topbar (Parent) then notifications panel(Child) positioning based on parent. I'm trying to prevent this behavior.
For smoother animations, I've used transform, of course, we can use CSS top. Any suggestion? Thank you for devoting your time.
You could set the height of .dropdown in viewport units (100vh - the height of the topbar)
Example:
$('.dropdownToggler').click(function() {
$('.dropdown').toggleClass('-isOpen')
});
$('.test').click(function() {
$('.topbar').toggleClass('transform');
});
* {
box-sizing: border-box;
}
.topbar {
position: fixed;
height: 45px;
background: #333;
top: 0;
right: 0;
left: 0;
padding: 12px;
color: #fff;
/* remove comment below */
/*transform: translateY(0);*/
}
.topbar.transform {
transform: translateY(0);
}
.dropdown {
background: #ddd;
height: calc(100vh - 45px);
position: fixed;
top: 45px;
right: 0;
left: 0;
color: #333;
/* main styles */
transform: translateY(100%);
transition: transform 300ms ease-in-out;
will-change: transform;
}
.dropdown.-isOpen {
transform: translateY(0%);
}
.test {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="topbar">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<button class="dropdownToggler">Open Menu</button>
<button class="test">toggle `transform` to parent</button>
<div class="dropdown">Notifications</div>
</div>
</body>
</html>