Can someone explain why does the image slide back nicely and the text disappears right away when you hover out?
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#image {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #image {
transition: 1s;
left: -100px;
}
.wrapper:hover .text {
transition: 1s;
left: 50%;
}
.text {
white-space: nowrap;
//color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 150%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="wrapper">
<img id="image" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
<div class="text">text</div>
</div>
So what I want is that the text also slides out nicely on hover out and not just disappear.
You also need to add the transition property to the .text:
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#image {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper:hover #image {
transition: 1s;
left: -100px;
}
.wrapper:hover .text {
transition: 1s;
left: 50%;
}
.text {
white-space: nowrap;
//color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 150%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transition: 1s;
}
<div class="wrapper">
<img id="image" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" alt="">
<div class="text">text</div>
</div>
Related
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
You are using transform with translation in order to center your element then you are overriding the transform with the rotation which create the issue. Instead you can adjust the top/left values in order to center and avoid using transform then you will have the needed rotation:
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 55px);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 60px);
left:calc(50% - 60px);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
You can also simplify your code by using pseudo elements like this:
* {
box-sizing:border-box;
}
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto;
background: black;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
background:radial-gradient(circle at center, grey 50px,transparent 51px);
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:before,
.circle:after {
content:"";
border-radius: 50%;
position: absolute;
transition: 1.5s all ease-in-out;
border: 2px solid white;
}
.circle:before {
top:0;
left:0;
right:0;
bottom:0;
border-left-color:transparent;
}
.circle:after{
top:5px;
left:5px;
bottom:5px;
right:5px;
border-right-color:transparent;
}
.circle:hover::before {
transform: rotate(360deg);
}
.circle:hover::after {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
</div>
</div>
Setting the transform property in the :hover will overwrite the existing transform property, so you need to include the translate transforms in the :hover versions to avoid moving the circles in the process of setting their rotation.
If you want the rotation to animate you'll also need to set initial values for the rotation transform.
One additional note: using transition, the rotation will only happen once. If you want repeated rotations you'll need to use an animation (you can do this by uncommenting the animation lines in the snippet).
Demo:
.wrapper {
position: relative;
width: 400px;
height: 200px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
/*animation: spin 1.5s infinite linear;*/
transform: translate(-50%, -50%) rotate(360deg);
}
.circle:hover .circle-1 {
/*animation: spin 1.5s infinite linear reverse;*/
transform: translate(-50%, -50%) rotate(-360deg);
}
#keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
How can I achieve the desired effect? I want to create a kind of box that flips around in 3d in the x axis and reveals the other face, all while conserving the same dimensions. Currently the effect is almost working but for some reason one face is always visible. Why does that happen and how to change that?
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Just add this css properties,
#div2 { z-index: 1;}
#div1:hover #div2 { z-index: 0;}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
z-index: 1;
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
z-index: 0;
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
hover me!
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
Add backface-visibility:hidden;
div {
backface-visibility: hidden;
}
#div1 {
width: 100px;
height: 100px;
position: relative;
margin: 100px;
perspective: 300px;
perspective-origin: 50% 50%;
transition: all 1s;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: red;
transform-origin: 50% 50% -50px;
transition: all 1s;
}
#div3 {
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
background-color: orange;
transform-origin: 50% 50% -50px;
transform: rotateX(90deg);
transition: all 1s;
}
#div1:hover {
//transform: rotate(180deg)
}
#div1:hover #div2 {
transform: rotateX(-90deg);
}
#div1:hover #div3 {
transform: rotateX(0deg);
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
I am trying to create a cube out of shorter, stacked rectangular prisms but have run into some issues. I am not concerned about IE just yet, but I am concerned about the huge difference in rendering between Chrome, FF and Safari.
Chrome (v44.0.2403.155)
Safari (v8.0.3)
Firefox (v40.0.2)
Check out the live demo here: http://codepen.io/okeegan/pen/yNWNaw
The basic structure is (edited for brevity):
<div class="allsort positioned"><!-- Wrapper -->
<div class="allsort__layer"><!-- Individual prism in cube -->
<div class="allsort__layer-side bottom"></div><!-- side of prism -->
<div class="allsort__layer-side left"></div>
<div class="allsort__layer-side right"></div>
<div class="allsort__layer-side top"></div>
<div class="allsort__layer-side front"></div>
<div class="allsort__layer-side back"></div>
</div>
</div>
With the following styles:
.page {
perspective: 1000px;
position: fixed;
width: 100%;
height: 100%;
}
.allsort {
backface-visibility: visible;
transition: all 2s;
position: relative;
top: calc(50% - 50px);
width: 100px;
height: 100px;
margin: 0 auto;
}
.allsort.positioned .allsort__layer.pink-1 {
transform: translateY(0) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.black-1 {
transform: translateY(8px) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.cream {
transform: translateY(16px) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.black-2 {
transform: translateY(24px) rotateX(-45deg) rotateZ(45deg);
}
.allsort.positioned .allsort__layer.pink-2 {
transform: translateY(30px) rotateX(-45deg) rotateZ(45deg);
}
.allsort__layer {
backface-visibility: visible;
transform-style: preserve-3d;
transform: translateY(1000px) rotateX(-45deg) rotateZ(45deg);
transition: all 2s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 65px;
height: 65px;
}
.allsort__layer-side {
backface-visibility: visible;
transition: all 400ms;
transition-delay: 2s;
transform-origin: 50% 50%;
}
.allsort__layer-side.top {
background-color: magenta !important;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 55px;
}
.allsort__layer-side.bottom {
transform: translateZ(12px);
background-color: yellow !important;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 55px;
}
.allsort__layer-side.left {
transform-origin: top center;
transform: rotateX(90deg);
background-color: green !important;
height: 12px;
left: 0;
position: absolute;
top: 0;
width: 55px;
}
.allsort__layer-side.right {
transform-origin: center left;
transform: rotateY(-90deg);
background-color: orange !important;
height: 55px;
left: 0;
position: absolute;
top: 0;
width: 12px;
}
.allsort__layer-side.front {
transform-origin: top center;
transform: rotateX(90deg);
background-color: blue !important;
height: 12px;
left: 0;
position: absolute;
top: 55px;
width: 55px;
}
.allsort__layer-side.back {
transform-origin: center left;
transform: rotateY(-90deg);
background-color: red !important;
height: 55px;
left: 55px;
position: absolute;
top: 0;
width: 12px;
}
I have tried fiddling with the order of side stacking in the HTML with poor results. Are there any obvious problems with my setup? I'm pretty sure I've tried every combo of transform-style: preserve-3d and backface-visibility: visible possible but maybe there's a secret formula?
Below is the my code
http://liveweave.com/ks0njD
html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
and CSS:
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
}
.box2{
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
perspective: 1000px;
}
.container:hover .box1{
transform: rotate(60deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
transform: translateY(84px) rotate(-60deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
As you can see, when the divs rotate there is slight distortion, is there anyway i can make this look perfect ? i tried using backface and perspective but doesnt makes any difference.
#Amer what you mean from 'look perfect'? Something like this?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 15px;
background: black;
top: 112px;
left: 200px;
background:#3ac7f2;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box2{
position: relative;
width: 100px;
height: 15px;
background: black;
top: 93px;
left: 200px;
background:#3ac7f2;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.container:hover .box1{
background:#09F;
transform:background .4s ease-in-out;
transform: rotate(-45deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
background:#09F;
transform:background .4s ease-in-out;
transform: translateY(68px) rotate(45deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>