I am working on a streaming service. I want to make a zoom in like Netflix when you hover on a title. How would I accomplish this, I am really rusty with animations.
.container {
display: flex;
margin-top: 30px;
}
.item {
position: relative;
display: block;
flex: 1 2 0px;
transition: transform 1000ms;
}
.container:hover .item {
transform: translateX(-25%);
}
.item:focus ~ .item,
.item:hover ~ .item {
transform: translateX(25%);
}
.container .item:focus,
.container .item:hover {
transform: scale(2);
z-index: 1;
}
body {
overflow: hidden;
}
.item img {
display: block;
max-width: 100%;
}
<div class="container">
<img src="https://placeimg.com/640/480/hills" alt="Hills">
<img src="https://placeimg.com/640/480/nature" alt="Nature">
<img src="https://placeimg.com/640/480/forest" alt="Forest">
<img src="https://placeimg.com/640/480/games" alt="Games">
</div>
This is a small reference to the hover effects and animations. For more knowledge try Try this, even I learnt from this.
Related
i need some help with a css slide loop,
Its working but the slide is not smooth, there is a jittering and there is a jump at the end the loop.
I kept changing the keyframe but i just cant find a way to make is smooth without jittering
So here's the code :
thats the container :
.container {
max-width: 1140px;
position: relative;
width: 100%;
margin: auto;
text-align : center ;
overflow : hidden;
}
// here the column where the images slides
.col-lg-3 {
animation: slide 15s linear infinite;
margin: 20px 5px ;
}
#keyframes slide {
0% {transform: translate(0)}
100% { transform: translateX(calc(-250px * 5))}
}
Pretty sure that there must be a better solution. But you need to ask better question i think.
I still don't know what do you need, but check this maybe it will help.
I create a box full of images and give that box a margin-left (comes from justify content: end inside parent container(main-container)) and cover it with another box (cover-container) which have a position:absolute on it. and have a higher z-index than main-container and same background-color with main-container.
In animation i gave
100% {
transform: translateX(-600%);
}
-600% because i have 5 images and when i give 5 width it acts like it is jumping as you said in your question but when giving 600% (5 + 1) it acts better like continious loop.
img{
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
position: relative;
margin:0;
}
.container {
max-width: 1200px;
display: grid;
place-content: center;
margin: 0 auto;
background-color: bisque;
height: 100vh;
}
.main-container{
display: flex;
overflow : hidden;
justify-content: end;
}
.cover-container {
position: absolute;
display: grid;
place-content: center;
height: 400px;
width: 900px;
z-index: 999;
margin-left: 300px;
background-color: bisque;
overflow: hidden;
}
.image-container{
position: relative;
display: flex;
width: 75%;
height: 400px;
}
img{
animation: slide 7.5s linear infinite;
}
#keyframes slide {
0% {
transform: translate(0);
}
100% {
transform: translateX(-600%);
}
}
<div class="container">
<div class="main-container">
<div class="cover-container"></div>
<div class="image-container">
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
</div>
</div>
</div>
In the following layout, I'm trying to get my content, when hovered over, to stay bottom-aligned in the overall box, so that the words "HEADLINE" and "Subhead" stay where they are and the revealed <ul> just "sits on top" of it. I'm wrapping my head around CSS Grid as best I can - but I am at a loss.
.programbox {
display: grid;
grid-template-areas: 'item';
align-content: end;
justify-content: stretch;
height: 300px;
width: 700px;
background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.programbox::before {
content: '';
grid-area: item;
background-color: red;
mix-blend-mode: multiply;
}
.content {
grid-area: item;
isolation: isolate;
color: white;
align-self: end;
}
.details {
display: none;
}
h1,
p {
margin: 0;
padding: 10px;
}
.programbox:hover .content {
height: 300px;
}
.programbox:hover .details {
display: inherit;
}
<div class="programbox">
<div class="content">
<div class="details">
<ul>
<li>Grades 4 – 8, participants referred by partner schools or social services agencies</li>
<li>Weekly on-ice practices</li>
<li>Learn on-ice skills, confidence building, equipment care</li>
<li>Intro to mentoring relationships with volunteers & HEROS All Stars</li>
</ul>
</div>
<h1 class="header">HEADLINE</h1>
<div class="description">
<p>Subhead</p>
</div>
</div>
</div>
(I do want the .content box to be full height of the container on rollover, turning the entire image red.)
Additionally... I can't get the hover transition to go slower with "transition: 1s;" regardless of which element I place that rule on.
Thanks for any help or suggestions!
I tried your code snippet and i did refactor it. Removed unnecessary html tags and changed some style options.
.programbox {
height: 300px;
width: 700px;
background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.programbox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
mix-blend-mode: multiply;
transition: all 1s ease-in-out;
transform: translateY(73%);
}
.programbox:hover::before {
transform: translateY(0%);
}
.content {
height: 100%;
display: grid;
grid-template-rows: 1fr repeat(2, 35px);
overflow: hidden;
isolation: isolate;
color: white;
}
h1,
p,
li {
line-height: 1;
}
.header {
grid-row: 2;
}
.description {
grid-row: 3;
}
.details {
grid-row: 1;
}
.header,
.description {
margin: 0;
padding: 0 10px;
align-self: flex-start;
}
.details {
transform: translateY(100px);
opacity: 0;
user-select: none;
transition: all 0.5s ease-in-out;
}
.programbox:hover .details {
transform: translateY(0);
opacity: 1;
user-select: auto;
transition: all 1.5s ease-in-out;
}
<div class="programbox">
<div class="content">
<h1 class="header">HEADLINE</h1>
<p class="description">Subhead</p>
<ul class="details">
<li>
Grades 4 – 8, participants referred by partner schools or social
services agencies
</li>
<li>Weekly on-ice practices</li>
<li>Learn on-ice skills, confidence building, equipment care</li>
<li>
Intro to mentoring relationships with volunteers HEROS All Stars
</li>
</ul>
</div>
</div>
I am trying to move an element using hover transition. What I expected was when the mouse if hovered over the element, the transition will fire. When the mouse leaves the element, it will transition back. But what is happening is, instead of hover, it behaves like mouseover. That means, even within the element, if I move my cursor, the transition fires. My code is:
.wrapper {
height: 150px;
overflow: hidden;
display: flex;
width: 150px;
flex-wrap: wrap;
}
.img {
width: 100%;
height: 150px;
background-color: tomato;
color: black;
}
.info {
height: 150px;
width: 100%;
background-color: skyblue;
transform: translateY(0);
transition: all 1s;
}
.img:hover~.info {
transform: translateY(-150px);
}
<div class="wrapper">
<div class="img">This is IMG</div>
<div class="info">This is info</div>
</div>
Why does it behave like this?
Why does it behave like this?
Because you are not hovering .img any more, when you place .info above it.
Either use pointer-events: none on .info, or if that is not possible (because the user needs to interact with that element as well), then handle this via :hover on the parent container - .wrapper:hover .info { … }
Use hover for both .img & .info, so when one of these present you can stay with the situation you want. when leave just then .info will go back.
.wrapper{
height:150px;
overflow: hidden;
display:flex;
width:150px;
flex-wrap: wrap;
}
.img{
width:100%;
height:150px;
background-color: tomato;
color:black;
}
.info{
height:150px;
width:100%;
background-color: skyblue;
transform: translateY(0);
transition: all 1s;
}
.img:hover ~ .info, .info:hover{
transform: translateY(-150px);
}
<div class="wrapper">
<div class="img">This is IMG</div>
<div class="info">This is info</div>
</div>
I have the css transition working when the user hovers over item however when the mouse exits the div, content is pushed below during the transition. Below is my html/css along with a jsfiddle to show what I mean.
html:
<div id="container">
<div class="item">
<div class="img">
</div>
<div class="heading">
</div>
</div>
</div>
css:
#container {
width: 100%;
height: 100%;
}
.item {
width: 100%;
height: 400px;
position: relative;
}
.img {
background: #000;
width: 40%;
height: 400px;
float: left;
transition: width 0.5s ease;
}
.heading {
width: 60%;
height: 400px;
float: right;
background: #900;
transition: width 0.5s ease;
}
.item:hover .img {
width: 100%;
}
.item:hover .heading {
width: 100%;
background:rgba(255,255,255, 0.9);
position: absolute;
top:0;
left:0;
}
JSFiddle
I am sure it is a simple position problem. However, I am not familiar enough with the transition to know where to find the answer.
Updated position to
tranform: translateY(-100%);
in order to get rid of the non-transition property. Now before/after :hover the div heading gets pushed below item. Updated JSFiddle to show.
Updated transition: all to transition: width on both img and heading which fixed heading getting pushed below img on :hover, however the original problem of heading being pushed below when user exits :hover is still an issue.
I think I found the answer:
by making heading have position:absolute;, I can have it forced to stay inside of the item div, keeping it from moving below it. So my updated css (with actual class names and production stuff) looks like;
.flight {
height: 400px;
position: relative;
}
.flight-img {
background: red;
background-size: cover;
width: 40%;
height: 400px;
float: left;
position: relative;
/* CSS Animation Effects */
transition: width 0.5s ease;
}
.flight-heading {
width: 60%;
float: left;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: width 0.5s ease;
}
/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
float: right;
}
/* Adding hover effects for desktop */
.flight:hover .flight-img {
width: 100%;
}
.flight:hover .flight-heading {
width: 100%;
position:absolute;
top:0;
left:0;
transform: translateY(50%);
background: rgba(0,0,0,0.75);
color: #fff;
h2 {
color: #fff;
}
}
while my html looks like:
<div id="flights">
<div class="flight">
<div class="flight-img"></div>
<div class="flight-heading">
<h2>Shared Flights</h2>
<p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
<button>Book Now</button>
</div>
</div>
<div class="clear"></div>
</div><!-- End Flights -->
with a JSFiddle to show. I know the animation needs work, but I figure making it smooth will be easy now that the divs stay in one place.
so I have a div which will include an image http://www.reversl.net/hovers/ and I'd like for the image to reveal two links when hovered like in layout shown here http://www.reversl.net/demo/ Is it possible to achieve this using only css?
you can create the div with links and in css:
div.myimage div.links { display:none;}
div.myimage:hover div.links { display:block;}
sample html:
<div class="myimage">
<div class="links"> we are the links</div>
<img src="animage.png" />
</div>
obviously you have to setup yourself div positioning
Another way you could do it with display:none/block
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container div { width: 100%; position: absolute; top: 0; display: none; }
div.container img:hover + div { display: block; }
div.container div:hover { display: block; }
<div class="container">
<img src="an_img.jpg">
<div> A link should be here </div>
</div>
You could always use 'opacity'.
Your markup would be something like this:
<div class="wrapper">
<img src="example.png" alt="example" />
<ul class="links">
<li>Example Link</li>
<li>Example Link</li>
</ul>
</div>
Then in CSS:
.wrapper {
position: relative; /*so the absolute positioning works */
}
.links {
position: absolute;
top: 0;
left: 0;
opacity: 0; /*hidden by default */
width: 100%;
height: 25px; /*making this up */
}
.wrapper:hover .links, .wrapper:focus .links {
opacity: 1; /*visible on hover */
}
A couple caveats to this technique:
You will need to use an opacity filter for IE8 and below, as they don't understand the opacity CSS property
I would NOT recommend this technique for navigation, as you seem to be intending. Users on touch devices (smartphones and tablets) don't really have the "hover" state to rely on.
If you want some bonus points, though, for users with modern browsers, add this:
.links {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
And the links will 'fade' in - all with CSS.
if you want to hover over the image only:
div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container img:hover { z-index: -1; }
div.container div { width: 100%; position: absolute; top: 0; }
div.container div:hover { z-index: 1; }
(the last one is needed to eliminate flicker when hovering over the links)
<div class="container">
<div> A link should be here </div>
<img src="an_img.jpg">
</div>