CSS Transitions for various style values - javascript

I'm working on getting better with CSS animations and transitions. What I'm trying to do is make the transition from a square to a circle and vice versa smoother. I know that I need to use the transition method in CSS to control this.
2 questions:
Why is the transition method not working in the below code snippet?
How do I go about making different transition properties for each changing value? i.e. 1 transition timing for changing the border radius, 1 transition timing for moving the circle to where the square is, etc.
.container-flex {
display: flex;
width: 500px;
height: 250px;
border: 1px solid black;
background-color: rgb(0,0,255);
}
.circle {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
border-radius: 100px;
transition: all 1s alternate;
}
.circle:hover {
border-radius: 0;
}
.square {
width: 200px;
height: 200px;
background-color: rgba(0,255,0,0.5);
transition: all 1s alternate;
}
.square:hover {
border-radius: 100px;
}
<html>
<body>
<div class="container-flex">
<div class="circle"></div>
<div class="square"></div>
</div>
</body>
</html>


.container-flex {
display: flex;
width: 500px;
height: 250px;
border: 1px solid black;
background-color: rgb(0,0,255);
}
.circle {
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
border-radius: 100px;
transition: all 1s ease;
}
.circle:hover {
border-radius: 0;
}
.square {
width: 200px;
height: 200px;
background-color: rgba(0,255,0,0.5);
transition: all 1s ease;
}
.square:hover {
border-radius: 100px;
}
<html>
<body>
<div class="container-flex">
<div class="circle"></div>
<div class="square"></div>
</div>
</body>
</html>

Related

How to crop image canvas/mask when hover?

Any react library or quick CSS way to crop the image's canvas when on hover?
Like this: https://imgur.com/A4x0DJ7.gif
Thank you

a simple clip-path can do it:
.box {
display: inline-block;
padding: 10px;
background: grey;
}
img {
display: block;
clip-path: inset(0);
transition: .5s all;
}
.box:hover img {
clip-path: inset(10px);
}
<div class="box">
<img src="https://picsum.photos/id/1069/200/200">
</div>

Here you go;
I just used the divs instead of images which i hope is ok.
#img {
height: 300px;
width: 300px;
background-color: grey;
display: flex;
align-items: center;
justify-content: center;
}
#image {
height: 280px;
width: 280px;
background-color: orange;
}
#image:hover {
transition: width 0.5s, height 0.5s;
width: 260px;
height: 260px;
}
<div id='img'>
<div id='image'></div>
</div>

css (box-shadow) transition on page load

Is there a way to make a transition happen for a box-shadow on page load instead of with a hover or click effect?
The transition I want on page load, or as an event:
.item:hover{
margin:0 auto;
box-shadow: 1px 1px 20px grey;
transition: 0.7s;
max-width: 940px;
color: dimgrey;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px 10px 10px 10px;
}

you can name keyframes a name and provide the time you need, I have provided4sec in the example.
It says change the background color from red to yellow and increase the height by 200px and animate this for 4 seconds.
.item {
height: 100px;
width: 100px;
background-color: blue;
animation-name: animate;
animation-duration: 4s;
border-radius: 10px;
}
#keyframes animate {
from {
background-color: red;
}
to {
background-color: yellow;
height: 200px;
}
}
<div class="item">
</div>

2X2 Overshadowing Image

I am trying to make a webpage that allows the 2x2 of image blocks, when hovered over, to overshadow the other images that are in the body.
But for some reason I cannot get the image to escape its own div box.
html, body {
height: 100%;
width: 100%;
}
div {
width: 50%;
height: 50%;
float: left;
position: relative;
transition: width 2s, height 4s;
transition-delay: 2s;
}
div:hover {
width: 100%;
height: 100%}
div:nth-of-type(1) {
background: #ccc;
}
div:nth-of-type(2) {
background: #bbb;
border-left: 1px solid #f00;
}
div:nth-of-type(3) {
background: #aaa;
border-top: 1px solid #f00;
}
div:nth-of-type(4) {
background: #ddd;
border-top: 1px solid #f00;
border-left: 1px solid #f00;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

Are you looking for an effect something like this:
body {
height: 200px;
width: 400px;
}
body {
border: 1px solid black;
}
div {
display: inline-block;
width: 49%;
height: 25%;
position: relative;
transition: width 2s, height 4s;
transition-delay: 2s;
}
div:hover {
z-index: 100;
width: 100%;
height: 100%;
}
div:nth-of-type(1) {
background: #eee;
}
div:nth-of-type(2) {
background: #bbb;
}
div:nth-of-type(3) {
background: #999;
}
div:nth-of-type(4) {
background: #666;
}
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

If I understood your problem correctly, you're looking into a hover option that'll cast a shadow layer on top of everything else?
If so, there's a simple trick to that, using the transform: scale(1) and the box-shadow command.
Personally I prefer to insert all images into separate DIVs and assign a class to them.
Try this:
https://codepen.io/meta704/pen/LYpREjK

Pseudo after element css properties are not working in jquery [duplicate]

This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Access the css ":after" selector with jQuery [duplicate]
(3 answers)
Closed 3 years ago.
I'm working on the pseudo class element here on hover I want to change ::after background color, I have tried but its is not working. Can anyone suggest me in the right direction why it is not working.
$(document).ready(function() {
$('.box').click(function() {
$('.box:after').css('background-color', 'yellow');
});
});
.box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
.box:after {
content: '';
position: absolute;
top: 133%;
width: 50px;
height: 50px;
background-color: green;
}
.content {
position: absolute;
left: 50px;
width: 0;
height: 50px;
background-color: blue;
transition: all 0.5s linear;
}
.box:hover .content {
width: 600px;
transition: all 0.5s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box">
<div class="content"></div>
</div>

Js not supporting pseudo element properties. better Do with css
.box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
.box:after {
content: '';
position: absolute;
top: 133%;
width: 50px;
height: 50px;
background-color: green;
}
.box:hover:after {
background-color: yellow;
}
.content {
position: absolute;
left: 50px;
width: 0;
height: 50px;
background-color: blue;
transition: all 0.5s linear;
}
.box:hover .content {
width: 600px;
transition: all 0.5s linear;
}
<div class="box">
<div class="content"></div>
</div>

you cannot target pseudo element in jQuery so i have created 1 class changed
.changed:after{
background-color: yellow;
}
and toggled that class when hover in jQuery.
Hope this helps. thanks
$(document).ready(function() {
$('.box').hover(function() {
$(this).toggleClass('changed');
});
});
.box {
position: relative;
width: 50px;
height: 50px;
background-color: red;
}
.box:after {
content: '';
position: absolute;
top: 133%;
width: 50px;
height: 50px;
background-color: green;
}
.content {
position: absolute;
left: 50px;
width: 0;
height: 50px;
background-color: blue;
transition: all 0.5s linear;
}
.box:hover .content {
width: 600px;
transition: all 0.5s linear;
}
.changed:after{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box">
<div class="content"></div>
</div>

Have image side by side without scrollbar

I'm working on a Roulette site, i just can't get the roulette animation to work.
I have an image for the roulette but i need the image to disappear after a certain amount of % and that the image loops around to the left.
This is how it kind of needs to look like (it doesn't end at the end of the border, and doesn't loop around to the left thought.):
$("#right").click(function () {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function () {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
And this is what i want it to look like, but the border has to end near the end of the screen, and the image has to be invisible outside the border, and loop around:
div.numbers {
display: inline-flex;
border: 4px solid gray;
}
div.numbers img {
margin-right: 5px;
}
<section>
<div class="numbers">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
</div>
</section>
so once i click on a button it should do the transition left 500px, and loop the image around to the left so the image keeps going to the right until the image is 500px further, and it should be invisible outside the border.
Thanks alot for the help!

You're really close to hiding the scrolled content. You just need to hide the overflow in section with overflow: hidden;
$("#right").click(function() {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function() {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
overflow: hidden;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>

The parent element needs { overflow-y: hidden; } in your css code

Categories

Resources