When I hover, it scales perfectly but the logo moves up a little bit. I tried transform-origin: center (even though that is the default) and nothing changed.
HTML
<div class="portfolio-projects">
<div class="project">
<img src="#" alt="">
</div>
</div>
CSS
portfolio-projects {
display: grid;
grid-gap: 50px;
margin: 50px 0;
max-width: 1050px;
.project {
position: relative;
cursor: pointer;
background-color: $gray;
max-width: 500px;
height: 325px;
overflow: hidden;
}
img {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-35%) scale(.8);
transition: .2s;
}
.project:hover {
img {
transform: translate(-50%,-50%) scale(.9);
}
}
Wow. So I just needed to change it to this
.project:hover {
img {
transform: translate(-50%,-35%) scale(.9);
}
}
I forgot to adjust the hover after adjust the original value.
Related
Why a mouse over transition in one image causing a jitter in nearby images?
The images are large and fits in the div with width:100%.
Observed the issue in chrome.
.post:hover figure img {
transform: scale(1.03);
}
.post img {
transition: all cubic-bezier(.4,0,.2,1) .3s;
transform: scale(1);
}
/* Main Div css start here */
.slide_Wrapper {
display: flex;
}
/* This is for child div */
.slide {
width: 290px;
height: 160px;
overflow: hidden;
background: #000;
margin:10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 10px;
}
/* This is for child div border */
.slide::after {
content: "";
position: absolute;
width: 90%;
height: 82%;
border: 2px solid #fff;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%,-50%);
}
/* Background images */
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all cubic-bezier(.4,0,.2,1) .3s;
transform: scale(1);
position: absolute;
}
/* Background images on hover */
.slide:hover img {
transform: scale(1.2);
}
/* Text */
.slide h2{
position: relative;
z-index: 2;
color: #fff;
}
<!-- Here I create a main div and two child div -->
<div class="slide_Wrapper">
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
<h2>XYZ</h2>
</div>
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
<h2>ABC</h2>
</div>
</div>
I'm creating a hover effect on an image with SCSS on a WordPress site (see gif: https://gyazo.com/1a35247e40d74b5fc756d508de4231eb)
As you see the image gets a "distorted" after hovering over it, maybe the ease-in property is wrong, or I'm not doing the hover effect properly. I'm wondering what I'm doing wrong in the code when it behaves like this.
This is the code that is working:
(left out some SCSS because it was so wast but the & is used to use parent class)
Edit: The HTML & SCSS
<div class="project_container">
<div class="project_content">
Test event
<br>
2018
</div>
<img src="http://testsite.com/wp-content/uploads/2018/12/img.jpg" class="attachment-full aligncenter">
</div>
-
&_container {
position: relative;
height: 300px;
width: 300px;
&:hover {
& > img {
opacity: .2;
}
& > .project_content {
opacity: 1;
}
}
& img {
position: absolute;
width: 100%;
height: 100%;
/*
object-fit: none;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
*/
// Hover tranisiton
transition: opacity .5s;
}
}
&_content {
opacity: 0;
transition: opacity .5s;
// Center Position
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $purple;
z-index: 2;
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
text-align: center;
}
}
So using :hover; on the &_container gives the project_content: opacity: 1;. Then it also blurs the background image with the opacity: .2;, and the effect is achieved with a transition;
Thank you!
I rewrote everything with the hover effect so now I use an overlay class which has opacity: 0; on it (and a transition that takes care of the effect on :hover)
This is a simple version of the HTML:
<div class="project_container">
<div class="project_content">
<p>Content</p>
</div>
<img src="#" alt="test">
<div class="project_overlay"></div>
</div>
and the simplified SCSS:
.project {
&_container {
position: relative;
height: 300px;
width: 300px;
&:hover .project_overlay,
&:hover .project_content {
opacity: 1;
transition: opacity .5s;
}
}
& img {
position: absolute;
width: 100%;
height: 100%;
}
&_overlay {
background-color: rgba(255, 255, 255, .5);
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
transition: opacity .5s;
}
}
Here I have an image and a description inside a container.
I want when I flip the container, the image hides and the description shows up, so I used backface-visibility: hidden; on the image, but it didn't work.
.scene {
width: 200px;
height: 150px;
}
.container {
width: 100%;
height: 100%;
position: relative;
transition: transform .4s;
}
.image,
.description {
position: absolute;
width: 100%;
height: 100%;
}
.scene:hover .container {
transform: rotateY(180deg);
}
.image {
backface-visibility: hidden;
}
<div class="scene">
<div class="container">
<div class="description">
Kurapica is an anime character.
</div>
<img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
</div>
</div>
backface-visibilty:hidden on .image will not work as you are rotating the .container not .image...
so rotate the .image and .description instead of .container to get the desired effect
.scene {
width: 200px;
height: 150px;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.image,
.description {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform .4s;
}
.description {
transform: rotateX(-180deg);
background: red;
display: flex;
align-items: center;
text-align: center;
}
.scene:hover .image {
transform: rotateX(180deg);
}
.scene:hover .description {
transform: rotateX(0deg);
}
<div class="scene">
<div class="container">
<div class="description">
Kurapica is an anime character.
</div>
<img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
</div>
</div>
Because you have to rotate the image where you specified the backface-visibility:
.scene {
width: 200px;
height: 150px;
}
.container {
width: 100%;
height: 100%;
position: relative;
}
.image,
.description {
position: absolute;
width: 100%;
height: 100%;
transition: transform .4s;
}
.scene:hover .container .image {
transform: rotateX(180deg);
}
.image {
backface-visibility: hidden;
}
<div class="scene">
<div class="container">
<div class="description">
Kurapica is an anime character.
</div>
<img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
</div>
</div>
You need to add on the description element a hidden backface-visibility property too and rotate it to 180deg. That way it will be hidden on a non-hover state. Add the property transform-style: preserve-3d on the container element and that should do it.
You have to set the transformed element's backface-visibility too:
.scene:hover .container {
transform: rotateX(180deg);
backface-visibility: hidden;
}
I've created a responsive CSS3 triangle using the following guide.
GUIDE
The problem I now face is that I want to decrease its height. So it's not a 90-degree triangle but rather, I want to adjust its height to for example 30 pixels whilst maintaining a skewed triangle shape as well as it's responsiveness.
Here is what I have so far:
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: rotate(45deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
I tried experimenting with the perspective transform but with no luck.
You can scale the element to whatever ratio you want. I've compressed the triangle in my code by 2. Just use transform: scale(1, 0.5) rotate(45deg);
Note: The order of transformations will do matter. The result of
transform: rotate(45deg) scale(1, 0.5); is different from transform: scale(1, 0.5) rotate(45deg);
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: scale(1, 0.5) rotate(45deg)
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
Answer by spooky daimon is way more intuitive, go for that one. Just to show the possibilities, you can also skew the pseudo element and adapt rotation as well as translation.
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: translate(25%) rotate(30deg) skew(-30deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
I'm trying to make a 3D card flipping effect with CSS like this.
The difference is that I want to use only CSS to implement it.
Here is the code I tried:
/*** LESS: ***/
.card-container {
position: relative;
height: 12rem;
width: 9rem;
perspective: 30rem;
.card {
position: absolute;
width: 100%;
height: 100%;
div {
position: absolute;
height: 100%;
width: 100%;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
backface-visibility: hidden;
transition: transform 1s;
&:hover {
transform: rotateY(180deg);
}
}
}
}
HTML:
<div class="card-container">
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
</div>
The issue is that the card doesn't flip, it snaps from back to front like this:
Is it possible to implement this 3d card flip on hover effect using only CSS?
I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the back face this is what it looks like:
Here is an example of a simple CSS only flipping card the flip animation is launched on hover :
.card {
position: relative;
width: 50vh;
height: 80vh;
perspective: 500px;
margin: 10vh auto 50vh;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(360deg);
}
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
Note that you will need to add vendor prefixes depending on the browsers you want to support. See canIuse for 3d transforms and transitions.
This is what I changed in your code for the flip effect:
the front face wasn't rotated on th Y axis on hover
the hover effect was launched when the .back div was hovered. This can create flickering as that div is rotating and "disapears" at mid rotation. It's better to launch the animation when the static parent is hovered.
the first parent isn't really usefull so I removed it
yes it can be done using CSS only and you can do by using CSS3 animation property. Here is example of flipping card animation.
<div class="container text-center">
<div class="card-container">
<div class="card">
<div class="front">
<span class="fa fa-user"></span>
</div>
<div class="back">User</div>
</div>
</div>
The CSS
.card-container {
display: inline-block;
margin: 0 auto;
padding: 0 12px;
perspective: 900px;
text-align: center;
}
.card {
position: relative;
width: 100px;
height: 100px;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
background: #FEC606;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 5px;
color: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
}
.front {
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.back {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);
}
You can also read this article about CSS Flip Animation on Hover
You can also find demo and download source from the article.