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>
Related
<body>
<div class="circle"> <p>projects</p></div>
</body>
body {
div {
width:100%;
max-width: 250px;
height:250px;
background-color:red;}
.circle:hover {
border-radius: 50%;
background-color:yellow;
transform: rotate(0.5turn);
transition:all .35s ease;
}
.circle:hover p {
pointer-events: none;
}
}
Hi everyone,
totally new to html and css here and trying to experiment an idea but can't figure it out
how to apply the hover effect only to the <div> element , but will not affect the <p> tag inside it?
the idea is that I need <p> in the centre of div and remain the same place (or upside down) while div is hovered
idea visualization
You don not need to rotate the element to achieve the result from your image.
First you can use flexbox properties to center the p inside your div and use :hover on div to change its border radius.
.circle {
width:100%;
max-width: 150px;
height: 150px;
background-color: red;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.circle:hover {
border-radius: 50%;
background-color: yellow;
}
<div class="circle">
<p>projects</p>
</div>
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.
I'm trying to do something like this demo. As the page scrolls down, the various parts become visible. I added a jsfiddle here. As you can see, when the second line of text is hovered it overwrites the line above it. I know my code is using hover and the demo site changes with scrolling but I thought this would be easier to get to work first.
Would someone please explain how do I make it so only the contents of the div with ID changeme is enlarged without affecting the others? Here's my code:
<style>
#changeme {
height: 50px;
width:100px;
transition: all .5s ease-in-out;
}
#changeme:hover {
height: 200px;
width:100px;
transform: scale(1.5);
}
</style>
<div>
<h1>Title</h1>
<div>
<div>Main text<div>
<div id="changeme">
<div>Some Text</div>
<div><img src="example.png"></div>
</div>
</div>
</div>
Run this in full-page mode. Here you go:
var ScrollFunction = function() {
var y = window.scrollY;
var viewport = window.innerWidth;
var counter = (y/viewport) * 100;
if ( counter >= 10) {
document.getElementById("containerOne").className = "container show"
}
if (counter >= 20) {
document.getElementById("containerTwo").className = "container show"
}
if (counter >= 30) {
document.getElementById("containerThree").className = "container show"
}
};
window.addEventListener("scroll", ScrollFunction);
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
}
body{
height: 200vh;
background-color: #313131;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container{
width: 80%;
height: 500px;
border: 1px solid rgb(126, 126, 126);
margin-bottom: 5vh;
display: none;
justify-content: center;
align-items: center;
flex-direction: row;
}
.box{
width: calc(80%/4);
display: flex;
height: 50%;
opacity: 1;
margin-left: 10px;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.185);
animation: 1s 1 linear normal showUp;
transition: .4s all;
}
.box:first-child{
margin: 0;
}
.box:hover{
transform: scale(1.5);
}
.show{
display:flex;
}
#keyframes showUp {
0%{
height: 0;
opacity: 0;
display: none;
}
100%{
display: flex;
height: 50%;
opacity: 1;
}
}
<div id="containerOne" class="container">
<div class="box">MyBox1</div>
<div class="box">MyBox2</div>
<div class="box">MyBox3</div>
<div class="box">MyBox4</div>
</div>
<div id="containerTwo" class="container">
<div class="box">MyBox1</div>
<div class="box">MyBox2</div>
<div class="box">MyBox3</div>
<div class="box">MyBox4</div>
</div>
<div id="containerThree" class="container">
<div class="box">MyBox1</div>
<div class="box">MyBox2</div>
<div class="box">MyBox3</div>
<div class="box">MyBox4</div>
</div>
If you want to change the size of an element on hover without affecting others then you can use just the transform: scale.
If you also (or instead of) alter the width and/or height then unless the element is positioned in some non-relative way it will 'disturb' elements around it.
So try:
#changeme:hover {
transform: scale(1.5);
}
When you come to want to expand elements as they come into view, investigate IntersectionObserver. You can attach an observer to each of those elements and as they appear you can transform them, or use CSS animate and/or a delay setting to get the sort of effects shown in the linked site.
I have a project website. There are 3 divs. What I want to do is that when I hover on the first div, the other 2 get smaller for emphasis. I have tried this but only one of the 2 divs shrink using the sibling and parent divs. How can I resize to or more divs when hovering only one div?
I need in CSS because the rules says that javascript may not be used.
Did you try to achieve this?
.prnt2 {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0;
background: transparent;
}
.chld {
width: 100%;
height: 100%;
margin: 0 auto;
background: lightgreen;
transition: all .4s ease;
}
.prnt:hover .prnt2:not(:hover) .chld {
height:50%;
width: 50%;
transition: all .5s ease;
}
.prnt2:hover .chld {
background: green;
}
<div class="prnt">
<div class="prnt2">
<div class="chld"></div>
</div>
<div class="prnt2">
<div class="chld"></div>
</div>
<div class="prnt2">
<div class="chld"></div>
</div>
</div>
using the sibling ~ selector this can be achieved, Although its limited.
Here we're selecting all elements whith class .tohide that comes after divs with class .tohover, So as you can see they have come after the hovered element.
div {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
display:inline-block;
}
.tohover:hover ~ .tohide {
height:50px;
vertical-align:top; /* To stick them to the top */
}
<div class="tohover"></div>
<div class="tohide"></div>
<div class="tohide"></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.