While doing a project, I need to draw a box which plays animation within 2 second and will move one corner to another.How can I do It in a easy way?
There are several ways of doing animations and it will be worth reading up on both CSS transition and CSS animation.
Just to start off here is a very simple example. A red square sits in a container whose dimensions are known. The square has a transition of 2s set on all - which means on any animatable CSS property.
When you click the button it has a class added or removed (using toggle) and in this the square is translated to the bottom of the container (or back to its initial position when the class is removed).
.container {
border: solid 1px;
width: 250px;
height: 100px;
}
.box {
width: 10px;
height: 10px;
background: red;
position: absolute;
transition: all 2s;
display: inline-block;
}
.box.move {
transform: translate(240px, 90px)
}
<div class="container">
<div class="box"></div>
</div>
<button onclick="document.querySelector('.box').classList.toggle('move');">click me</button>`enter code here`
Related
Consider the following structure:
<div id="PARENT_DIV">
<div id="LEFT_CHILD_DIV">
</div>
<div id="RIGHT_CHILD_DIV">
</div>
</div>
Requirements for PARENT_DIV:
PARENT_DIV will be placed in front of all other GUI elements via z-index.
PARENT_DIV should expand both horizontally and vertically based on the variable sizes of LEFT_CHILD_DIV and RIGHT_CHILD_DIV, but only to a certain point. E.g., I need to be able to set the equivalent of max-width and max-height on PARENT_DIV. For vertical height, PARENT_DIV should expand up to the height of the taller child div (but still only up to max-height), and the other child should float to the top.
I need to be able to arbitrarily place PARENT_DIV on the screen by various means (e.g., top: Ypx; left: Xpx; or top: Y%; left: X%; or top: 50%; left: 50%; transform: translate(50%, 50%);, etc.).
Requirements for each of **LEFT_CHILD_DIV and RIGHT_CHILD_DIV:**
LEFT_CHILD_DIV and RIGHT_CHILD_DIV should each expand both horizontally and vertically based on their content, but only to a certain point. E.g., I need to be able to set the equivalent of max-width and max-height independently on LEFT_CHILD_DIV and RIGHT_CHILD_DIV.
LEFT_CHILD_DIV and RIGHT_CHILD_DIV should always be side-by-side, regardless of their capped widths.
LEFT_CHILD_DIV and RIGHT_CHILD_DIV should each/independently vertically scroll their content when they can no longer grow taller (capped by either their max-height rules or PARENT_DIV's max-height rule, whichever comes into effect first.
Please see this example Photoshop mock-up for a visual of what I'm trying to accomplish. I have not been able to find a CSS-related tutorial on how to accomplish exactly the above. I've found bits and pieces, but they do not work when combined together. I've tried numerous CSS combinations/variations on rules like display, overflow, box-sizing, position, etc., and am not achieving any success. How can I accomplish the above requirements using CSS?
I can accomplish this with JavaScript, but would like to avoid scripting if possible, and do this in pure-CSS way.
You can use flexbox like this:
#PARENT_DIV {
position:absolute;
top:50px;
left:150px;
border: 1px solid red;
display: inline-flex;
max-height: 200px;
max-width: 300px;
align-items: flex-start;
}
#LEFT_CHILD_DIV {
border: 1px solid green;
max-width: 180px;
max-height: 100px;
overflow: auto;
}
#LEFT_CHILD_DIV>div {
height: 200px;
width:200px;
background:rgba(0,0,0,0.5);
animation:change 2s infinite alternate linear;
}
#RIGHT_CHILD_DIV {
border: 1px solid orange;
max-width: 80px;
max-height: 50px;
overflow: auto;
}
#RIGHT_CHILD_DIV>div {
width: 200px;
height:300px;
background:rgba(0,0,0,0.5);
animation:change 2s 1s infinite alternate linear;
}
#keyframes change{
to{width:5px;height:20px;}
}
<div id="PARENT_DIV">
<div id="LEFT_CHILD_DIV">
<div></div>
</div>
<div id="RIGHT_CHILD_DIV">
<div></div>
</div>
</div>
I am not that familiar with CSS animations. My client want to achieve the following result when hovering the contact button:
so to be clear:
the square's move from left to right and vice versa
when the square moves, the line underneath it changes color
the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.
Is this achievable with only CSS or do I need JS as well?
How would I approach this?
I created a quick and dirty JSFiddle here: https://jsfiddle.net/x0b397pb/
As you can see, it is possible with just CSS. In this example I used pseudo elements (::before and ::after) to create most of the elements.
You mentioned "Im not that familiar with CSS animations". For this I used transitions.
transition: left 1000ms, right 1000ms, box-shadow 1000ms;
Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).
To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.
Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.
Here is a small demonstration of css transition:
Consider this HTML:
<div class="container">
<div class="box"></div>
</div>
With this CSS:
.container {
position: relative;
width: 400px;
height: 400px;
border: solid 1px black;
}
.box {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
left: 10px;
background-color: red;
transition: all 1s;
}
.container:hover {
border-color: blue;
.box {
top: 200px;
left: 200px;
width: 160px;
height: 160px;
background-color: blue;
}
}
Or, check it on JsFiddle: https://jsfiddle.net/ronency/75ozjq3s/
.box {
background: linear-gradient(80deg, #f3efef, #90009f, #01060d);
background-size: 600% 600%;
animation: AnimationName 29s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
i have a div which is box and a 'p' element whose opacity is set to 0. when i hover over the div i want the 'p' elements opacity to change to 1. i have the following code . its looks proper to me but its not working. i could not figure out the problem with it. can some one help me. thanks in advance.
HTML:
<p class="se">Hover over the div element below</p>
<div class="box"></div>
css:
.se{
position: relative;
color:red;
opacity:0;
}
.se{
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
.box{
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;
}
box:hover + .se{
opacity:0;
}
jsFiddle http://jsfiddle.net/2f1k5yq4/
CSS selector +
Any element that is the next sibling of a previous element (that is: the
next child of the same parent)
.box {
position: relative;
left: 400px;
width: 100px;
height: 100px;
background: red;
}
.se {
color: red;
opacity: 0;
position: relative;
transition: 1s linear;
}
.box:hover + .se {
opacity: 1;
}
<div class="parent">
<div class="child">
<div class="box"></div>
<p class="se">Hover over the div element below</p>
</div>
</div>
This is actually a kind of annoying problem with just CSS. I'd prefer using Javascript, especially if you already have jQuery loaded into your site.
But, that said, this can sort of be done in CSS. I'm going to assume you just want to show/hide an element, so I'll use display for the example rather than opacity, so modify as needed to use a transition.
The first problem you have is that you box:hover rather than .box.hover. The second problem is a bit more annoying. Abhitalks is correct that +, the adjacent sibling selector, only selects the next sibling, so you can't have the text above the div that will show it. If, however, you switch the order, moving the div above the text, it works. You could use some clever positioning, floating, etc. in order to make the order of their appearance different than their order in the markup, if you wanted.
.se{
display: none
}
.box{
width: 100px;
height: 100px;
background: red;
}
.box:hover + .se{
display: block;
}
<div class="box"></div>
<p class="se">Hover over the div element below</p>
I want to have a square image inside a circle.
When the user hovers over the image, the image should scale (zoom in).
The circle should remain the same size.
Only during the CSS transition, the square image overlaps the circle (as if overflow:hidden weren't there at all).
Here's a demo with the weird behavior in Chrome and Safari:
http://codepen.io/jshawl/full/flbau
Working ok in firefox.
You need to add this code to the parent of your img :
position:relative;
z-index:1;
Example here : http://codepen.io/DavidN/pen/dIzJK
I removed some superfluous markup (the circle and square containers... only needs one) and styled the img itself:
#wrapper {
width: 500px;
height: 500px;
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
#test {
width: 100%;
height: 100%;
transition: all 2s linear;
}
#test:hover {
transform: scale(1.2);
}
<div id="wrapper">
<img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>
Add this code to your parent div and solve problem :
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
It appears as though you were styling one too many elements! I've created a fork here
I edited some of your SASS code to utilize the compass library and make better use of the transition and transform properties which can be seen here:
body { padding: 3em; }
.circle {
height: 500px;
width: 500px;
border: 1px solid black;
#include border-radius(500px);
overflow: hidden;
}
.circle img {
height: 500px;
width: 500px;
#include transition(all 0.3s ease);
&:hover { #include transform(scale(1.1)); }
}
Hopefully this helps! Just think of the circle element as the parent container which has general information about the space (e.g. 500px wide and 500px tall). The image itself has a rounded border of 500px. This is the element you want to edit! You can scale and transform this element here without interacting with the parent circle container. Reference compass for additional information about using the library! Good luck!
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.