How to superimpose several images in one line using css and html?
Ex: If my cursor is on image1, I want all images to the right be push to the right like that I can see image1
Here what I have done so far:
HTML
<body>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</body>
CSS
.deck {overflow:hidden}
.deck img {position:relative; float:left; width:185px; height:278px}
.deck img + img {margin-left: -160px;}
.deck img:hover {z-index:9999; border:1px solid red; background: pink}
https://jsfiddle.net/53ryuapx/
You can use the ~ selector to select all images following the one you hover. And as the images are positioned relatively, you can combine this with a left value:
.deck img:hover ~ img {
left: 160px;
}
Might I even suggest you combine this with the relatively new clip-path property? Unfortunately browser support is not great.
.deck img:hover ~ img {
left: 160px;
clip-path: inset(0 160px 0 0)
}
Edit: There are several ways to animate this depending on the result you prefer. This might need some tewaking to get to the result you want, but this should get you started. What's happening here is we declare a keyframe animation called slidein. When an image is hovered, the images to the right are animated using animation: slidein .2s. See the effect in this JSFiddle:
#keyframes slidein {
0% {
left: 0;
clip-path: inset(0 0 0 0);
}
100% {
left: 160px;
clip-path: inset(0 160px 0 0);
}
}
.deck img:hover ~ img {
left: 160px;
clip-path: inset(0 160px 0 0);
animation: slidein .2s;
}
Related
I want to display an animated loading icon when the user have submitted a search.
SEQUENCE OF EVENTS I'M LOOKING FOR:
USER SUBMITTED A SEARCH
MAKE LOADING ICON VISIBLE
MAKE LOADING ICON INVISIBLE ONCE THE SEARCH IS COMPLETED
The issue I'm facing is mostly css.
Firstly, the loading icon seems to be behind the form element.
Secondly, I cannot increase the size of the div (searchEngineForm) to have the same size as the form.
Lastly, I cannot set div (searchEngineForm) width to 100%. It goes outside of the form.
Here is my code:
HTML:
<form action="setJobFields" method="POST">
<div id="searchEngineForm" style="display: none;">
<div class="loader">
</div>
</div>
...
</form>
CSS:
#searchEngineForm{
position: absolute;
/* width: 100%; */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
To set an html element above others, you could set its Z-index to a higher number than what’s around it.
For example, say you’re wanting to display your loading symbol in front of the rest of the page. You could contain the whole page in a single div, for the sake argument we give it a class of “page”, we can set it as:
.page{ z-index: -1 ;}
And the loader as
.loader{ z-index: 1; }
Then, to position it where you want, you can set the position to absolute and move it around with the top and left properties, such as
.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }
I'm creating an animation https://codepen.io/adsler/pen/bGNWxOe and I've created a div class. I've adjusted this with css. It works. However, as soon as I introduce another div class, it's not only effected by the first, but there seems to be no way of selecting it with css.
So here is the original:
Html:
<div
class="random">four<br>
three<br>zero<br>nine</div>
Css:
.random {background.
color:red;background-image:
linear-gradient(black,
white); width: 10px; height:
200px; font-weight: 900;
position:relative; font-
size:20px; left: 20x;
top:60px; filter:sepia(0);
color:black; border-radius:
100px; box-shadow: 90px 90px
30px 90px #000; text-align:
center;}
.random {animation: turn 30s
ease-in infinite; animation.
direction: alternate.
reverse;animation-delay:
2s;}
#keyframes turn {
0%
{transform:rotate(1400deg);
width: 1px} 30%.
{transform:rotatex(7000deg);
font-size: 30px;} 40%
{transform:rotatez(360deg);
width: 13em} 70%
{width: 10em;}100%
{opacity: 0.9;}
That's fine but then, when I introduce the next sequence, by way of a div class, I can't find the selector with css and the style is influenced by the first div.
<div
class="starring">Starring
</div>
.starring {margin-top: 500px
!important; font-size: 50px
!important;}
So I tried specificity.
.random.starring {margin.
top: 500px
!important; font-size: 50px
!important;}
Still unable to select starring with css and style still influenced by previous div.
In your codepen under the html section you have one too many ending 's in the first part.
Like this:
<div class="random">four<br>three<br>zero<br>nine</div></div>
<div class="starring">Starring</div>
Which should be:
<div class="random">four<br>three<br>zero<br>nine</div>
<div class="starring">Starring</div>
Next thing is - you don't end your animation in your css part
#keyframes turn {
0%{transform:rotate(1400deg);
width: 1px}
30%{transform:rotatex(7000deg);
font-size: 30px;}
40% {transform:rotatez(360deg);
width: 13em}
70% {width: 10em;}100%
{opacity: 0.9;}
Here you need a last } to actually wrap up the turn tag.
Like this:
#keyframes turn {
0%{transform:rotate(1400deg);
width: 1px}
30%{transform:rotatex(7000deg);
font-size: 30px;}
40% {transform:rotatez(360deg);
width: 13em}
70% {width: 10em;}100%
{opacity: 0.9;}
}
Make these changes and it works as supposed.
.starring {
color:red;
}
Works for me.
The problem is you are missing a closing } for your turn keyframe.
#keyframes turn {
0% {
transform:rotate(1400deg);
width: 1px
}
30% {
transform: rotatex(7000deg);
font-size: 30px;
}
40% {
transform: rotatez(360deg);
width: 13em
}
70% {
width: 10em;
}
100% {
opacity: 0.9;
}
}
And then for your second div, this will work:
.starring {
margin-top: 500px !important;
font-size: 50px !important;
}
I feel best solution here would be giving css to 1 element.
Add position:absolute to 1 of the element. And further accordingly adjust the element wherever you want using margin-bottom and margin-left!
Why does border-radius not work when background is not applied onto the animation.
The border radius only works when a background is applied at 0%-50%-100%. Without the background color the border-radius doesn't work.
I expect the border-radius to change from a square to a circle and then back to a square.
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
background:#41A9F0;
/* apply the animation */
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
50% {
transform: rotate(180deg) scale(2);
/* background: #5ABE8A; */
border-radius: 50%;
}
100% {
transform: rotate(360deg) scale(0.2);
/* background: #41A9F0; */
border-radius: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape Animation Challenge</title>
</head>
<body>
<!-- HINTS
1) Open shape-animation-ANSWER.html in your browser and try to create the final product.
2) Create a keyframe named box.
3) There are three points to this animation, starts off as a square, then a circle (background color for the circle is #5ABE8A), then back to a square.
Hint: You will need the properties border-radius and transform -->
<div class="square"></div>
</body>
</html>
Without any background color you can't see the animation but it still persist.
Here an example with your animation applied also to a div without background color but with border (to see what happen)
https://jsfiddle.net/cjohm3xb/1/
.square-border {
border:1px solid red;
/* apply the animation */
animation: box 8s linear infinite;
}
I have tested your code in Chrome 75.0.3770.142 and Edge 44.17763.1.0. You have provided a coloured div, so you can see the animation. Try to remove the background and add a child, which can be a text or something else, then you'll see the same effect. If you remove background and all the children, obviously you "will see" an empty animated div, which translates to nothing on screen actually!
I tried playing with keyframes, backgrounds and border radiuses. The page seems to work correctly. Check this stylesheet:
.square {
/* Set up the normal state */
display: block;
width:350px;
height:350px;
margin: 200px auto;
/* apply the animation */
background: #41A9F0;
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: rotate(0) scale(0.2);
background: #41A9F0;
border-radius: 0%;
}
10% {
background: green;
border-radius: 50%;
}
25% {
background: blue;
border-radius: 10%;
}
50% {
background: red;
transform: rotate(180deg) scale(2);
border-radius: 30%;
}
100% {
transform: rotate(360deg) scale(0.2);
background: yellow;
border-radius: 0%;
}
}
Remember that percentage values for border radius go from 0 to 50. Anything above 50 is simply 50.
Source: https://www.codecademy.com/forum_questions/559fe347e39efe4cf40005a9
I you can provide the browser you are using or explain the problem better at least, community could have provided better answers.
I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor=“#add8e6”>
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
I updated your fiddle https://jsfiddle.net/0vd79j2h/
<marquee> is Deprecated
It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)
Demo
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
#keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
#keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>
I'm trying to animate a span that moves back and forth enclosed within a div using CSS3 keyframes. Ideally, I'd like the keyframes to look something like this:
#-webkit-keyframes backandforth {
0% {text-align:left;} 50%{text-align:right;} 100%{text-align:left;}
}
Demo in JSFiddle
But since it's not possible to animate text-align, I've been searching for an alternative property that can be animated to reach the desired positioning. That's where I'm stuck at.
I tried setting the left property to 100% midway through the animation, but that ended up pushing the span off the div. I also tried animating the float property, but that didn't work.
Then I saw this question on moving text from left to right and tried the JSFiddle from the top answer. While it looks like the solution, it unfortunately did not work for me since I want my animation to move continuously at ease, and for the last few seconds of that animation, the span stalls.
CSS Solution
you can play around the left position when the animation is at 50% like so :
because when you put it left: 100% it depend on the left corner of the span this is why it will go out the container div
#-webkit-keyframes backandforth {0%{left:0;} 50%{left:58%;} 100%{left:0;}}
Live Demo
I hope this fits your needs
JavaScript solution
var thisis = document.getElementById("wrapper");
var tyty = document.getElementById("move");
var witth = tyty.offsetWidth;
thisis.style.paddingRight = witth +"px";
Live Demo
with this JS whatever you change the text it will still in the container div
There is also a pure-CSS way to do it if you combine absolute positioning left with simultaneous transform: translate.
https://jsfiddle.net/cd7kjwy6/
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
.mt-2 {
margin-top: 0.5rem;
}
/* ---------------- relevant CSS ---------------- */
.animated {
position: relative;
background-color: pink;
max-width: 200px;
overflow: hidden;
line-height: 3rem;
height: 3rem;
}
.animated__text {
position: absolute;
animation: 3s bounce ease-in-out infinite paused;
white-space: nowrap;
top: 0;
padding: 0 0.5rem;
}
.animated:not(.animated--on-hover) .animated__text,
.animated.animated--on-hover:hover .animated__text {
animation-play-state: running;
}
#keyframes bounce {
0%, 5%, 95%, 100% {
left: 0%;
transform: translate(0, 0);
}
45%, 55% {
left: 100%;
transform: translate(-100%, 0);
}
}
<div class="animated">
<span class="animated__text">animate me!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">Longcat is looooooooooooooooooong!</span>
</div>
<div class="animated mt-2">
<span class="animated__text">~</span>
</div>
<div class="animated animated--on-hover mt-2">
<span class="animated__text">only on hover</span>
</div>
If you wanted to snap the "hover" variant back to the original position, you could use something like this (or JavaScript for a proper reset):
.animated.animated--on-hover:not(:hover) .animated__text {
left: 0 !important;
transform: translate(0, 0) !important;
}