So, I was trying to create flip effect with css and here I am... fiddle link: https://jsfiddle.net/Munja/db11mmut/
I have 2 sides, front and back side. Issue is, back side is hidden until front side is rotated for 180deg. I would like to avoid that and make back side partially visible during rotation of front side, in order to make fine flip effect.
Any suggestions? Thank you in advance!
Code:
.container {
position: relative;
width: 200px;
height: 200px;
}
.container:hover .el{
transform: rotateY(180deg);
}
.el {
position: relative;
display: block;
width: 100%;
height: 120%;
background: #eee;
transition: 0.6s;
transform-style: preserve-3d;
}
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightgreen;
backgace-visibility: hidden;
z-index: 2;
transform: rotateY(0deg);
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightblue;
backgace-visibility: hidden;
transform: rotateY(180deg);
}
<div class="container">
<div class="el">
<div class="front">
Front Side
</div>
<div class="back">
Back Side
</div>
</div>
</div>
you have to remove transform: rotateY(0deg); and the z-index from the front class, here is a working example
https://jsfiddle.net/db11mmut/2/
Related
I'm having trouble with content wrappers as they are preventing my hover interactions from working.
The goal is to get the div with class='card' to have an interaction when the mouse goes over it.
.card {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
overflow: hidden;
}
.card>div {
height: 100%;
width: 100%;
}
.card .foreground {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(100%);
background-color: blue;
transition: .5s ease;
}
.card:hover .foreground {
transform: translateX(0);
}
<div class='card'>
<div class='foreground'> </div>
<div class='background'> </div>
</div>
All info here:
https://codepen.io/kaijinny/pen/poWezRL
Since the element with the class .section-bubble1
has a z-index: -1, it is not available for hover (because it is "under" the layer).
You need to reconsider the order of the z-index.
Is there a way to make a text content popup box appear when mouse hovers some HTML element?
I need the overlay to fit its content, because the way it is now is cropping the text, it's getting the height of the HTML element and not the height of its content.
It only slides left, but that's okay with me. I am going to place the html element to the right of the page later on, but I need to be able to set a margin from the starting point of the popup, because it slides just next the HTML element, I'd like some space between.
This is what I have got so far:
.container {
position: absolute;
width: 40%;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.overlay:hover {
display: none;
}
.container:hover .overlay {
width: 100%;
right: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
My Text
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
How can I do that?
See if that's what you're wondering to happen :
#container {
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
}
.link {
position: relative;
display: inline-block;
}
.link .tip {
visibility: hidden;
width: 0;
height: 100px;
opacity: 0;
background-color: #008CBA;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
transition: 0.5s ease;
overflow: hidden;
margin-right: 20px;
}
.link:hover .tip {
visibility: visible;
width: 150px;
height: auto;
opacity: 1;
}
<div id="container">
<div class="link">Hover me now !
<span class="tip">
Some few text here<br><br>
Let's try something else<br><br>
And adding more info here too<br><br>
And even a bit more here also
</span>
</div>
</div>
I was working on a little something for myself and I walked into a problem i simply cant solve. I am trying to achieve a small effect where there are 2 divs with skewed edges. However, their parent div gets a scrollbar because the skew falls outside.
HTML
<div class="c-r">
<div class=" c-c c-r-l-1">
</div>
<div class="c-c c-r-r-1">
</div>
</div>
CSS
.c-r{
display: block;
height: auto;
overflow: auto;
}
.c-c{
width: 50%;
height: 300px;
margin-top: 150px;
position: relative;
display: inline-block;
float: left;
background: #44bf86;
}
.c-r-l-1:before, .c-r-l-1:after {
content: '';
width: 100%;
height: inherit;
position: absolute;
background: inherit;
z-index: -1;
transition: ease all .5s;
-webkit-transform:skewY(5deg) ;
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform:skewY(5deg) ;
transform:skewY(5deg) ;
}
.c-r-l-1:before {
top: 0;
z-index: 12;
transform-origin: right top;
}
.c-r-l-1:after {
bottom: 0;
z-index: 12;
transform-origin: left bottom;
}
.c-r-r-1:before, .c-r-r-1:after {
content: '';
width: 100%;
height: inherit;
position: absolute;
background: inherit;
z-index: -1;
transition: ease all .5s;
}
.c-r-r-1:before {
top: 0;
transform-origin: left top;
transform: skewY(-5deg);
}
.c-r-r-1:after {
bottom: 0;
transform-origin: right bottom;
transform: skewY(-5deg);
}
#media screen and (max-width: 720px){
.c-r{
display: block;
overflow: auto;
}
.c-c{
width: 100%;
}
}
I am not really sure what other info I can give you than this. I hope you all can help me out and thank you for taking your time.
~Greetings
I found the fix to my problem.
All i had to do was add:
padding-top: 5%;
padding-bottom: 5%;
The reason why it has to be 5 is because my skew is going 5 degrees!
To my outer div. everything works fine now. Thanks everyone for their time!
If I move and enlarge an element using top, right, transform and width in safari it does not move smoothly on the first transition. It will transition based on the old width I assume then once it has finish it repositions the element. However transitioning back it works fine.
It's probably easier to understand by viewing it:
https://codepen.io/miketricking/pen/zZJZLR
<section class="container">
<div id="wrapper">
<div id="card">
<h3>click here</h3>
</div>
</div>
</section>
.container {
width: 550px;
height: 250px;
position: relative;
background-color: teal;
}
#wrapper {
height: 20%;
width: 20%;
top: 0;
right: 0;
position: absolute;
transition: all 1s ease;
}
#wrapper.center {
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 50%;
}
#card {
width: 100%;
height: 100%;
position: relative;
transition: all 1s ease;
}
h3 {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: red;
}
I'm really lost on this one. I can see the problem just have no idea on how to solve it.
I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself.
My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture.
I hope you can help me! Need to fix this!
Thank you in advance!
.container {
position: relative;
width: 25%;
height: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00b0f0;
opacity: 0.8;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<a href="AG2R.html">
<img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image">
</a>
<div class="overlay">
<div class="text">AG2R La Mondiale</div>
</div>
</div>
I found a relevant Stack Overflow thread where the consensus is that this is unachievable with CSS unless you want a pure black image done with filters - which aren't compatible in all browsers and would not have the sliding transition you've implemented.
So I opted to show you how this could look if you created blue overlays yourself in Photoshop as separate PNG images and transitioned with them. I created the PNG by making a layer filled with #00b0f0, set it to 80% opacity and used it as a clipping mask - essentially what your .overlay was trying to do. Here's a demo:
.container {
position: relative;
width: 25%;
height: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0.8;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.overlay .image {
position: absolute;
bottom: 0;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
text-shadow: #000 0 1px 1px;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<a href="AG2R.html">
<img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image">
</a>
<div class="overlay">
<img src="https://i.stack.imgur.com/DwIGH.png" alt="overlay" class="image" />
<div class="text">AG2R La Mondiale</div>
</div>
</div>