When I am applying hover on the card container it is not working or it is not flipping but I when I remove the hover it flips to the back side, I have tried everything that I know but still no progress on that.
`
import React from 'react'
import './Summary.css'
function Summary() {
return (
<div className='summary'>
<img className="body__image" src={require("./Images/background3Color.jpg")}></img>
<div className='box__container'>
<div className='boxes'>
<div className='box__inner'>
<div className='box__front'>
<img className='boxes__pics' src={require('./Images/AboutMe.jpg')}></img>
</div>
<div className='box__back'>
<div className='headline'></div>
<div className='education'>
<h2>Bachelor Of Technology in Computer Science and Tech.</h2>
</div>
<div className='work-ex'>
<p>Worked as an Application Dvelopment Associate in Accenture for 1 year</p>
</div>
</div>
</div>
</div>
<div className='boxes'>
<div className='box__inner'>
<div className='box__front'>
<img className='boxes__pics' src={require('./Images/Contacts.jpg')}></img>
</div>
<div className='box__back'>
<div className='headline'></div>
<div className='education'>
<h2>Bachelor Of Technology in Computer Science and Tech.</h2>
</div>
<div className='work-ex'>
<p>Worked as an Application Dvelopment Associate in Accenture for 1 year</p>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Summary
`
I was expecting the flip will work but to no avail.
I have tried to add hover to both box__inner and boxes container but still it would not flip.
Here is what I tried:
`
.summary{
position: relative;
height: 100vh;
z-index: -1;
}
.body__image{
height: 100vh;
}
.box__container{
position: absolute;
/* background-color: aqua; */
top: 0px;
width: 100%;
height: 100%;
/* opacity: 0.4; */
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.boxes{
height: 320px;
width: 300px;
margin: 0px 10px 0px 10px;
position: relative;
background-color: rgba(107,186,167,0.7);
perspective: 1000px;
overflow: hidden;
}
.box__inner{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: all 0.8s ease;
transform-style: preserve-3d;
}
.boxes__pics{
height: 100%;
width: 100%;
opacity: 0.7;
}
.box__inner:hover{
cursor: pointer;
transform: rotateY(180deg);
}
.box__front, .box__back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.box__front{
}
.box__back{
transform: rotateY(180deg);
}
`
The z-index was causing the main problem after removing it from the parent div the hover effect worked fine.
Related
When I hover the mouse over the box and try to click on the button but flickering occurs.
Can some one help me please I dont know who to fix it.
JSFiddle: https://jsfiddle.net/PedroTavares/fv7qjw8b/3/
.box {
margin-top: -1.5rem;
position: relative;
width: 250px;
height: 250px;
background-color: #06F;
transition: all .3s cubic-bezier(.34,1.61,.7,1);
z-index: 1;
}
.box:hover {
transform: translateY(-80px);
}
.box-btn{
margin-top: -3rem;
width: 250px;
display: flex;
justify-content: center;
}
button{
margin: 5px;
}
<div style="margin-top: 110px;" ></div>
<div>
<div class="box"></div>
<div class="box-btn">
<button> Text </button>
<button> Text </button>
</div>
</div>
I believe that this is solution for you.
I just add `.wrap` class around `.box` and now you can click on buton when hovering.
.box {
margin-top: -1.5rem;
position: relative;
width: 250px;
height: 250px;
background-color: #06F;
transition: all .3s cubic-bezier(.34,1.61,.7,1);
z-index: 1;
}
.wrap {
display: inline-block;
}
.wrap:hover .box {
transform: translateY(-80px);
}
.box-btn{
margin-top: -3rem;
width: 250px;
display: flex;
justify-content: center;
}
button{
margin: 5px;
}
<div style="margin-top: 110px;" ></div>
<div class="wrap">
<div class="box"></div>
<div class="box-btn">
<button> Text </button>
<button> Text </button>
</div>
</div>
I am not able to use transform: translateZ to change the position of back div to create a 3d affect . There are no changes at all in the image. I have used perspective and perspective origin to try and create a 3d affect. The front and back div are respectively the front and back sides of a cube. Here is the below code written in css and html respectively
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
}
.scene {
position: relative;
transform-style: preserve-3d;
}
.cube-container {
perspective: 100px;
perspective-origin: 50% 0%;
}
.cube {
height: 100px;
width: 100px;
}
.front {
height: 100px;
width: 100px;
background: rgb(62, 86, 226);
opacity: 0.5;
}
.back {
height: 100px;
width: 100px;
background: rgb(62, 86, 226);
opacity: 0.5;
top: -100vh;
position: absolute;
transform: translateZ(100px)
}
<div class="scene">
<div class="cube-container">
<div class="cube">
<div class="front">
</div>
<div class="back">
</div>
<div class="top">
</div>
<div class="bottom">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>
You missed transform-style: preserve-3d; on .cube and I would also use position: absolute; for .front. I dont understand the perspective perfectly, but its common to use higher numbers like: perspective: 500px;.
Hope it helped! :)
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
}
.scene {
position: relative;
transform-style: preserve-3d;
}
.cube-container {
perspective: 500px;
perspective-origin: 50% 0%;
}
.cube {
height: 100px;
width: 100px;
transform-style: preserve-3d;
transform: rotateY(20deg);
}
.front {
position:absolute;
height: 100px;
width: 100px;
background: red;
opacity: 0.5;
}
.back {
position: absolute;
height: 100px;
width: 100px;
background: blue;
opacity: 0.9;
transform: translateZ(-100px);
}
<div class="scene">
<div class="cube-container">
<div class="cube">
<div class="front">
</div>
<div class="back">
</div>
<div class="top">
</div>
<div class="bottom">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>
I have a mini-gallery of images which I want to use to toggle content depending on the image clicked. When hovering on the image it scales up slightly. My problem is that when scaling I want to hide the overflow off the page but still show the overflow in the y-direction. I have tried overflow-x: hidden, overflow-y: visible but the y-overflow only appears at the bottom and scrollbars appear.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 50%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
}
#images .image:hover {
transform: scale(1.1);
z-index: 10;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
<div class="image">
<img src="image.jpg">
</div>
</div>
Is there a way to make these act as it would with no overflow stated without a scrollbar appearing in the x direction?
You need to add scaling property to image instead of outer div.
#images {
height: 70vh;
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
overflow-y: visible;
}
#images .image {
width: 49%;
height: 35vh;
transition: 0.5s;
cursor: pointer;
z-index: 1;
overflow: hidden;
position: relative;
border:1px solid #000;
}
#images .image:hover img {
transform: scale(1.1);
z-index: 10;
position: absolute;
left: 0;
transition: .2s;
}
#images .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="images">
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
<div class="image">
<img src="https://dummyimage.com/600x400/ffffff/000000">
</div>
</div>
Remove overflow css from the images and add it to the body:
body {
width: 100%;
overflow: hidden;
}
Is there a way to implement this without using 3D transforms / perspective?
* {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100vh;
}
/* main = body (in real app) */
main {
transform-style: preserve-3d;
height: 100vh;
}
section.container {
display: contents;
position: relative;
height: 100vh;
}
section.container section.list {
transform-style: preserve-3d;
display: grid;
grid-template-rows: auto auto auto;
grid-row-gap: 10px;
position: absolute;
top: 50%;
left: 50%;
width: 45vw;
transform: translate(-50%, -50%);
}
div.item {
height: 50px;
background-color: white;
}
div.item.highlighted {
transform: translateZ(10px);
}
section.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #0009;
transform: translateZ(5px);
}
section.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.image img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
span.content {
background-color: white;
position: fixed;
top: calc(50% + 20vw);
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<section class="container">
<section class="image">
<img src="https://html5up.net/uploads/demos/story/images/banner.jpg">
</section>
<section class="list">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item highlighted">Item 3</div>
</section>
</section>
<section class="modal">
<span class="content">modal content</span>
</section>
</main>
I believe the creation rules of stacking context do not allow it. The content has to be centered and one of the best ways to do that is to use position, top/left, and transform: translate. But when you do that, a new stacking context is created and all .items are put inside. By that I can apply z-index only to all .items over .modal and vice versa.
3D perspective can solve that, but I wonder if this is the only solution, or if there is another (DOM restructuring and putting .modal somewhere else, ...) I tried like everything I can think of, but with no success and I still believe I'm missing something.
You can avoid all the transform and center your element differently they you can use z-index. Simply avoid setting any z-index to container to avoid the stacking context creating. Only use z-index with the modal element and the element you want to hightlight.
* {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100vh;
}
/* main = body (in real app) */
main {
height: 100vh;
}
section.container {
height: 100vh;
display: flex;
}
section.container section.list {
display: grid;
grid-template-rows: auto auto auto;
grid-row-gap: 10px;
width: 45vw;
margin:auto;
position: relative;
}
div.item {
height: 50px;
background-color: white;
}
div.item.highlighted {
z-index:10;
position:relative;
}
section.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #0009;
z-index:5;
}
section.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.image img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
span.content {
background-color: white;
position: fixed;
top: calc(50% + 20vw);
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<section class="container">
<section class="image">
<img src="https://html5up.net/uploads/demos/story/images/banner.jpg">
</section>
<section class="list">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item highlighted">Item 3</div>
</section>
</section>
<section class="modal">
<span class="content">modal content</span>
</section>
</main>
I have a problem with the following snippet: I need to make it work in Internet Explorer 11. In Chrome, Firefox and Edge it looks like it should.
There are 3 elements (red, yellow, green), beneeth each other. Another blue element with 50% of the height is on top of the others.
This is how it should look like:
However Internet Explorer 11 puts the blue element on the right side beneeth the others and not on top of them. Can you guys help me with that problem?
This is how it looks in IE11 - it should not look like this
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
The problem
The issue is that you are positioning .inner absolutely but not giving it a specific position. This means that where the browser first renders it is where it will output on screen. It seems IE handles this differently to other browsers which is why you are getting the discrepancy.
The solution
The following modifications would be required:
Add left: 0; to .inner to align it to the left of .flex-wrapper
Add top: 50%; to .inner to move it down 50% of .flex-wrapper and transform: translateY(-50%); to move it back up by 50% of its height
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I would made some changes.
First:
- Position .inner
- Make it full height thanks to its position
- Make it display: flex
.inner {
position: absolute;
top: 0; bottom: 0; left: 0;
display: flex;
}
Second:
- Give a height to .inner-element
- Center it
.inner-element {
height: 30%;
align-self: center;
}
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
/*height: 30%; No need for that anymore */
/*align-self: center; No need for that anymore */
position: absolute;
top: 0;
bottom: 0;
left: 0; /* Now it's in the right position */
display: flex; /* To be able to align the inner-element */
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
.inner-element {
height: 30%; /* Make it the right height */
align-self: center; /* Center it */
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>