I'm trying to build a photo gallery with stacked photos for each album. When you hover the album I want 1 image to rotate 20 left, one to rotate 20 right so I see bits of 3 images at the same time.
I think the problem is that the hover signals are stuck on the topmost image in the stacks. I'll post what I have tried below. Any ideas? Is it possible?
<!DOCTYPE html>
<head>
<title>Just-CSS: Rotate stacked images on hover</title>
<style>
body {
background-color: black;
color: white;
padding: 20px;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
position: absolute;
}
img { -webkit-transition: all 0.2s; }
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
img { border: 4px solid white; }
img.red { background-color: red; }
img.green { background-color: green; }
img.blue { background-color: blue; }
</style>
</head>
<body>
<ul class="img-stack">
<li><img class="red" width="100" height="100" src=""></li>
<li><img class="green" width="100" height="100" src=""></li>
<li><img class="blue" width="100" height="100" src=""></li>
</ul>
</body>
</html>
I know you can do it with JavaScript but I'm just playing with CSS so please no JavaScript :)
Just change this:
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
to this:
ul:hover img.green {-webkit-transform: rotate(-20deg);}
ul:hover img.blue {-webkit-transform: rotate(20deg);}
Because you can only activate one :hover selector at a time (as far as I'm aware), just capture the hover on the parent element.
I guess you should use your ul.img-stack as a wrapper to do it. Trigger the :hover event on the album itself, and not on each picture.
ul.img-stack:hover .green {-webkit-transform: rotate(-20deg);}
ul.img-stack:hover .blue {-webkit-transform: rotate(20deg);}
img:hover.green {-webkit-transform: rotate(-20deg);}
to
img.green:hover {-webkit-transform: rotate(-20deg);}
Related
I want to move img to top 4px when parent tag a is hovered. So I have something like this :
<a href="">
<img src="GitHub.png" alt="GitHub" />
</a>
And my CSS :
a:hover > img {
position: relative;
bottom: 4px;
}
When I apply transition to a or img, it doesn't move smoothly.
What's my mistake?
Use transform instead of bottom.
a:hover > img {
position: relative;
transform: translateY(-4px);
}
img {
transition: transform 1s;
}
<a href="">
<img src="https://placehold.it/50" alt="GitHub" />
</a>
You could also do it with keyframes:
.first:hover > img {
position: relative;
animation-name: move;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes move {
from {top: 0;}
to {top: 4px;}
}
<div class="body" style="position: relative;">
<a class="first" href="">
<img src="https://dummyimage.com/100"/>
</a>
</div>
For the transition effect to work, You should apply the transition on the selector and declare what the property you want to transitions original state in that selector. The final state of the transitioned property should be declared in the pseudo class.
The reason you were having issues is because you were declaring the tags position: relative only when hovered and never stated what the default state of the tag should be.
I recommend you check out this Codecademy lesson on transitions to get a better understanding. For a practical example here is a w3schools link that shows off the effect.
Finally for your code here is an example of what will work!
a > img {
position: relative;
top: 0;
transition: top 1s;
}
a:hover > img {
top: 4px;
}
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>
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;
}
This is a simple question that I'm stuck with, it should show with opacity: 1 but it doesn't. Here is my code:
CSS
.menu{
padding-bottom: 30px;
opacity: 0.3;
}
.menu .active {
opacity: 1;
}
HTML
<li class="menu"><img src="..." alt="" class="active" width="25"/></li>
According to this site it should work, but it doesn't, what have I done wrong?
EDIT: I am trying to have two list images, one which is faded out, one which has the active class which fades it in (opacity 1).
Opacity inheritance prevents a child element from being more opaque than the parent element.
If you are just trying to make the background color transparent you could use RGB
.menu
{
background: rgba(0, 0, 255, 0.3);
}
Update From Comment
Try this:
.menu img{
padding-bottom: 30px;
opacity: 0.3;
}
.menu img.active {
opacity: 1;
}
Since you didn't post a code example any more specific than this, I'll base my answer on what you posted. Instead of using opacity, where children can't be more opaque than their ancestors, you can use RGBA:
.menu {
padding-bottom: 30px;
color: rgba(0,0,0,.3);
}
.menu .active {
color: rgba(0,0,0,1);
}
jsFiddle example
here you can see the image is 100% opaque and the list item 30% opaque.
Updated fiddle to better answer your question based on your comment:
You can now use active class as you'd like.
Updated Fiddle:
http://jsfiddle.net/dfJHe/1/
HTML:
<li class="menu">This is active.</li>
<li class="menu">This is not active.</li>
CSS:
li.menu a{
opacity: 0.3;
}
li.menu a.active{
opacity: 1;
}
I have five buttons in the UI with their respective inner box shadows. I want them to rotate individually when hovered upon. Now when I hover over one even the adjacent button is also rotating accordingly . And also the inner shadow should make a smooth transition inside the buttons ? Why is not that happening? Where am I mistaken?
http://jsfiddle.net/EP3Ps/
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
//
}
.Next_Class
{
//
}
.Prev_Class
{
//
}
ul.Round_Buttons
{
position:relative;
left:40%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:#d1bfbf;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border-style:solid;
cursor:pointer;
box-shadow:inset 1px 1px 1px 1px #f00;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
ul.Round_Buttons li:hover
{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
}
#-webkit-keyframes rotate
{
from
{
transform : rotate(0deg);
}
to
{
transform :rotate(-360deg);
}
}
#keyframes rotate
{
from
{
transform: rotate(0deg);
}
to
{
transform: rotate(-360deg);
}
}
</style>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1st_Round">1</li>
<li id="2nd_Round">2</li>
<li id="3rd_Round">3</li>
<li id="4th_Round">4</li>
<li id="5th_Round">5</li>
</ul>
</div>
</body>
</html>
You are using keyframes not correctly.
Also, to make shadows changed you should add rule for new shadow on :hover.
It should be something like this:
ul.Round_Buttons li:hover
{
animation:rotate 1s;
-webkit-animation:rotate 1s;
-moz-animation:rotate 1s;
box-shadow:inset 1px 1px 1px 10px #f00;
}
see updated fiddle