I implemented css animation to the image and it works well on explorer or chrome through the pc.
Though, on safari, the image is placed in the left top corner. Since I'm using position: absolute and relative for animation, I can't use display:flex option.
Plus, as you can see from below ss, card size is also not fit as applied in css, and have weird space between card and buttons.
current status on safari
Here is my current code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
vertical-align: middle;
}
.container {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url("../../images/background-forloading.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.flip-card {
width: 100%;
height: 80vh;
perspective: 1600px;
cursor: pointer;
transform: translateY(40px) rotateX(-8deg) rotateY(10deg);
animation: movement 5s infinite;
}
#keyframes movement {
50% {
transform: translateY(-40px) rotateX(8deg) rotateY(-10deg);
}
}
.flip-card div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
backface-visibility: hidden;
transition: 0.7s;
width: 100vw;
height: 80vh;
}
.flip-card div img {
width: 100vw;
height: 80vh;
object-fit: contain;
}
.front {
filter: drop-shadow(0 0 30px #000);
}
.back {
transform: rotateY(180deg);
}
.flip-card:hover .front {
transform: rotateY(-180deg);
}
.flip-card:hover .back {
transform: rotateY(0);
filter: drop-shadow(0 0 20px rgb(120, 185, 232));
}
<div class="container">
<div class="flip-card">
<div class="front">
<img src="images/귀문관카드뒤.png">
</div>
<div class="back">
<img src="images/인간.png">
</div>
</div>
<div class="flip-card-button text-center">
<button class="enter">Save</button>
<button type="submit" class="enter">Next</button>
</div>
</div>
I'm not sure if it solves your problem, but your code is currently missing the browser prefixes.
-webkit- for Chrome, Safari, Opera, iOS
-moz- Firefox
-ms- Internet Explorer and Edge
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>
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.
I am having some difficulty getting slanted images to fit within 100% of my viewport width. Specifically,
div two-images-outer and two-images-inner are currently outside the 100% width of the viewport. I want to get it in line with the rest of the sections below (see image). Any help is greatly appreciated!
Image to illustrate problem of image div extending beyond 100% width of the viewport the image div is extending in order to obtain the skewed slant:
HTML:
<section>
<div class="three-images-wrapper">
<div class="three-images">
<div class="featured-image-outer">
<div class="featured-image-inner"
style="background-image: url(../img/servicesheader1.jpeg);">
<h1>Services</h1>
</div>
</div>
<div class="two-images">
<div class="two-images-outer">
<div class="two-images-inner">
<div class="image1"
style="background-image: url('../img/servicesheader2.jpeg');">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.three-images-wrapper {
height: 300px;
width: 100%;
}
.three-images {
margin-bottom: 4rem;
min-height: 300px;
position: relative;
}
.featured-image-outer {
position: absolute;
margin-left: -15%;
min-height: 360px;
overflow: hidden;
width: 76.5%;
-ms-transform: skew(-15deg,0deg); /* IE 9 */
-webkit-transform: skew(-15deg,0deg); /* Safari */
transform: skew(-15deg,0deg); /* Standard syntax */
}
.featured-image-inner,
.two-images-inner {
background-size: cover;
background-position: center;
}
.featured-image-inner {
left: 50px;
position: absolute;
top: 0;
height: 300px;
width: 100%;
-ms-transform: skew(15deg,0deg); /* IE 9 */
-webkit-transform: skew(15deg,0deg); /* Safari */
transform: skew(15deg,0deg); /* Standard syntax */
}
.two-images {
min-height: 300px;
position: relative;
right: -63vw;
top: 0;
width: 55%;
}
.two-images-outer {
min-height: 130px;
overflow: hidden;
position: absolute;
width: 100%;
-ms-transform: skew(-15deg,0deg); /* IE 9 */
-webkit-transform: skew(-15deg,0deg); /* Safari */
transform: skew(-15deg,0deg); /* Standard syntax */
}
.two-images-inner {
-ms-transform: skew(15deg,0deg); /* IE 9 */
-webkit-transform: skew(15deg,0deg); /* Safari */
transform: skew(15deg,0deg); /* Standard syntax */
}
.image1
{
position: relative;
height: 300px;
right: 19%;
width: 100%;
background-position: center;
background-size: cover;
background-clip: content-box;
}
You can use clip-path and it will be easier
.container {
height: 300px;
display:flex;
}
.container > * {
background-position: center;
background-size: cover;
flex:1;
}
.container > :first-child {
clip-path:polygon(0 0,100% 0,calc(100% - 100px) 100%,0 100%);
margin-right:-40px;
}
.container > :last-child {
clip-path:polygon(100px 0,100% 0,100% 100%,0 100%);
margin-left:-40px;
}
<div class="container">
<div style="background-image: url(https://picsum.photos/id/10/800/800);">
<h1>Services</h1>
</div>
<div style="background-image: url(https://picsum.photos/id/14/800/800);">
</div>
</div>
I am uploading 3 banners slides from my admin section thru PHP. The banner looks fine on the desktop top and mobile landscape view. But the mobile Portrait view does seems right , I would like the banner to reduce to fit in the mobile for portrait view.-site- www.shoeshineindia.com
<section class="section-slide">
<div class="wrap-slick1">
<div class="slick1">
<div class="item-slick1" style="background-image: url(<?php echo $imagename[1];?>)">
<div class="container h-full">
<div class="flex-col-l-m h-full p-t-100 p-b-30 respon5">
<div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
<span class="ltext-101 cl2 respon2">
</span>
</div>
CSS-used for one banner-
[ Slick1 ]*/
.wrap-slick1 {
position: relative;
}
.item-slick1 {
height: calc(100vh - 40px);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rs1-slick1 .item-slick1 {
height: calc(100vh - 84px);
}
.rs2-slick1 .item-slick1 {
height: 100vh;
}
#media (max-width: 991px) {
.item-slick1 {
height: calc(100vh - 70px) !important;
}
}
.arrow-slick1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: auto;
font-size: 80px;
color: rgba(0,0,0,0.3);
position: absolute;
opacity: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 200;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.wrap-slick1:hover .arrow-slick1 {
opacity: 1;
}
.arrow-slick1:hover {
color: #7280e0;
}
.next-slick1 {
right: 50px;
left: auto;
}
.prev-slick1 {
left: 50px;
right: auto;
}
#media (max-width: 991px) {
.next-slick1 {
right: 15px;
}
.prev-slick1 {
left: 15px;
}
}
Note -
Issue here is that the banner works fine on the desktop and mobile landscape But in mobile PORTRAIT it does not. it shows just the center of the banner.Need to view the banner as it looks like in the desktop and mobile landscape.
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.