This question already has answers here:
how to flip the div using css?
(3 answers)
Closed 2 years ago.
i am trying to show backside of card on hover using css. i tried below code but its just roates front div and doesn't display back div. also i want to hide front div on hover. Can anyone fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
i try to solve you question and this is my answer....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
Just change
.content:hover .front {
transform: rotateY(180deg);
}
to
.content:hover .front {
display: none
}
Check out this
https://jsfiddle.net/1dsv7e6b/1/
Please add opacity:0;
.content:hover .front {
transform: rotateY(180deg);
opacity:0;
}
You could use CSS animations here to give the effect of the card flipping but then also being hidden.
The #keyframes defines the animation. Here it starts at 0% with no rotation and opacity of 1 (i.e. visible).
Then at 100% the animation is complete at the rotation is 180 degrees and opacity set to 0 so that it is hidden.
#keyframes flip-card {
0% {
transform: rotateY(0deg);
opacity: 1;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
You can then apply this on hover like so:
.content:hover .front {
animation: flip-card 1s;
animation-fill-mode: forwards;
}
You use the animation property to call the animation and also add how long it should take.
An example can be seen here:
https://jsfiddle.net/368jr1ts/
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.scene {
width: 200px;
height: 200px;
margin: 0 auto;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
transition: all 3s;
position: relative;
transform-style: preserve-3d;
transform-origin: center center -100px;
}
.cube:hover {
transform: rotateY(360deg);
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 200px;
text-align: center;
background-color: aquamarine;
}
.cube__face_front {
z-index: 1;
}
.cube__face_right {
transform-origin: left;
transform: rotateY(90deg);
right: -200px;
}
.cube__face_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube__face_left {
transform-origin: right;
transform: rotateY(-90deg);
left: -200px;
}
.cube__face_top {
transform-origin: bottom;
transform: rotateX(90deg);
top: -200px;
}
.cube__face_bottom {
transform-origin: top;
transform: rotateX(-90deg);
bottom: -200px;
}
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face_front">front</div>
<div class="cube__face cube__face_back">back</div>
<div class="cube__face cube__face_right">right</div>
<div class="cube__face cube__face_left">left</div>
<div class="cube__face cube__face_top">top</div>
<div class="cube__face cube__face_bottom">bottom</div>
</div>
</div>
</body>
</html>
If the perspective is set on the. scene element, everything is ok, but I set the perspective on the .cube, as shown below. What's the difference?
.scene {
width: 200px;
height: 200px;
margin: 0 auto;
}
.cube {
width: 100%;
height: 100%;
transition: all 3s;
position: relative;
transform-style: preserve-3d;
transform-origin: center center -100px;
perspective: 600px; //Move perspective from .scene to here
}
I'm trying to figure out how to make the carousel element stand still when hovered (keep it in the same position where the cursor is) but it keeps changing the position to the center of the whole thing like in this picture:
The idea is to build a 3D carousel that rotates till the user hovers over it, then it stops, the hovered element grows (inviting to click on it), and if unhover animation continues, but for some reason element keeps changing position :c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="../css/test.css"> -->
<title>Document</title>
</head>
<style>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
}
#keyframes rotate {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.slider div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i)*40deg)) translateZ(350px);
background-color: black;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: 2s;
}
.slider div:hover {
transform: translateY(-50px) scale(1.2);
}
.slider:hover {
animation-play-state: paused;
}
</style>
<body>
<div class="slider">
<div style="--i:1"><img src=""></div>
<div style="--i:2"><img src=""></div>
<div style="--i:3"><img src=""></div>
<div style="--i:4"><img src=""></div>
<div style="--i:5"><img src=""></div>
<div style="--i:6"><img src=""></div>
<div style="--i:7"><img src=""></div>
<div style="--i:8"><img src=""></div>
<div style="--i:9"><img src=""></div>
</div>
</body>
</html>
Do you guys know any solutions?
Apply the transformation to the image on hover instead of the div. I also updated the code a little to optimize it using CSS grid instead of absolute position:
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
}
.slider {
display: grid;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: rotate 30s linear infinite;
}
#keyframes rotate {
0% {
transform: perspective(1000px) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateY(360deg);
}
}
.slider div {
grid-area: 1/1;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i)*40deg)) translateZ(250px);
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 1s;
}
.slider div:hover img{
transform: translateY(-50px) scale(1.2);
}
.slider:hover {
animation-play-state: paused;
}
<div class="slider">
<div style="--i:1"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:2"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:3"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:4"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:5"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:6"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:7"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:8"><img src="https://picsum.photos/id/1051/200/200"></div>
<div style="--i:9"><img src="https://picsum.photos/id/1051/200/200"></div>
</div>
I'm trying to recreate the vertical purple scrolling line that appear on this website but I can't get the animation to work properly. This is where I got stuck so far, I can't understand why the animation is not working.
<div class="tm-scroll">
<span></span>
</div>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
Thanks for your help
You have to add scrollHelperFerro animation using keyframes like below
https://codepen.io/rohinikumar4073/pen/MWaeRMZ
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
,
}
}
<div class="tm-scroll">
<span></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<div class="tm-scroll"><span></span></div>
</body>
</html>
here you define only animation-name, time, etc. but actual CSS animation code is following
animation: scrollHelperFerro 2s infinite ease-in-out;
add animation css:
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
I successfully added css code to our squarespace site to make gallery images have the title of each image appear on hover. The problem is that the title leaves extra white space (about 15px) bellow each image. I want each image to be touching each other on top and bottom the same way they do on the sides.
My code is bellow, here is the link to the page: https://baikart.com/artists2
I've tried using padding code but that pushes the image around and I just want the white space gone.
.summary-content {
position: absolute;
color:#fff;
top: 50%;
left: 50%;
opacity: 0;
transition: all .5s ease;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
#Main-content {
.summary-content {
position: absolute;
color:#fff;
top: 50%;
left: 50%;
opacity: 0;
transition: all .5s ease;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
}
.summary-item:hover {
img {
-webkit-filter: brightness(50%);
filter: brightness(50%);
transition: all .5s ease;
}
.summary-content{
opacity: 1;
}
}
.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: rgba(0,0,0,0.8);
}
.container:hover .overlay {
opacity: 1;
}
.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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://cdn.pixabay.com/photo/2017/08/30/07/56/money-2696229_960_720.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Hope the solution will help
The following CSS, inserted via the CSS Editor, will remove the gap between images:
#collection-5d1bb9f4d43d220001cae017 .summary-thumbnail-container.sqs-gallery-image-container {
margin-bottom: 0;
}
The CSS targets the "Artists 2" collection specifically by using its collection ID, which is an id attribute set on the body element. That way, if you create a different collection that you want to format differently, it will be unaffected by the CSS. If you want to apply the style globally, remove the #collection-.... ID selector at the beginning and simply target via classes. It also means that, if you want to target a different collection (but without applying the styles globally), you'll need to update the collection ID in the selector above.
I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()