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.
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>
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/
Below is my effort.
http://liveweave.com/i1qkNw
Below is also my code
.container {
display: inline-block;
position: relative;
border: 1px solid green;
}
.middle {
position: relative;
width: 300px;
height: 250px;
background: black;
}
.door {
position: absolute;
width: 300px;
height: 250px;
background: red;
top: 0;
left: 0;
opacity: 0.5;
transition: .5s;
transform-origin: center center;
}
.container:hover .door {
transition: .5s;
opacity: 0;
width: 0;
height: 0;
}
<div class="container">
<div class="middle"></div>
<div class="door"></div>
</div>
What i want to do is, when user hovers over container, I want the door div's width/height to be zero. As you can see, I am achieving this effect but it disappears to upper left corner. Is there any way I can make it disappear to its center?? Like the width and height are reduced till its center and disappear.
Kindly guide me how to achieve this effect.
You have to set top / bottom / left / right values to 50%.
.container {
display: inline-block;
position: relative;
border: 1px solid green;
}
.middle {
position: relative;
width: 300px;
height: 250px;
background: black;
}
.door {
position: absolute;
width: 300px;
height: 250px;
background: red;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
transition: .5s;
transform-origin: center center;
}
.container:hover .door {
transition: .5s;
opacity: 0;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
width: 0;
height: 0;
}
<div class="container">
<div class="middle"></div>
<div class="door"></div>
</div>
I'm trying to build a responsive app with off-view side content, modeled after this tutorial:
http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms
The tutorial doesn't allow for separate scrolling of the main content and the side content, and I'm having trouble building this function satisfactorily.
Through different nesting and hiding, I've gotten the two different divs to scroll separately, but I'm unable to scroll to the bottom of either div when the browser window is less than about 600 pixels high. The scrollbar disappears into the bottom of the window. See pic below.
Why is this happening? Thank you.
DEMO: http://jsbin.com/zotow/1/ (reduce browser window height below 600px to see error)
HTML:
<body>
<div id="page">
<div id="view">
<div id="content">
<div id="side">
<p>Lorem ipsum...</p>
</div>
<div id="side-btn">?</div>
<div id="main">
<p>Lorem ipsum...</p>
</div>
</div>
</div
</div>
</body>
CSS:
#charset 'UTF-8';
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#page {
min-width: 320px;
height: 100%;
min-height: 568px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#view {
min-width: 320px;
max-width: 426px;
height: 100%;
min-height: 568px;
max-height: 768px;
margin: 0 auto;
position: relative;
top: 0;
bottom: 0;
overflow: hidden;
}
#content {
min-width: 320px;
max-width: 426px;
height: 100%;
min-height: 568px;
max-height: 768px;
-webkit-transition: 0.25s linear all;
-moz-transition: 0.25s linear all;
-o-transition: 0.25s linear all;
transition: 0.25s linear all;
}
#content.show-side {
-webkit-transform: translateX(280px);
-moz-transform: translateX(280px);
-ms-transform: translateX(280px);
-o-transform: translateX(280px);
transform: translateX(280px);
}
#side {
background-color: #fff;
width: 280px;
height: 100%;
position: absolute;
top: 0;
left: -280px;
padding: 14px;
font-size: 16px;
line-height: 1.333;
overflow: auto;
}
#side-btn {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
z-index: 999;
background-color: #0010cc;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
#side-btn:hover {
background-color: #999dcc;
}
#main {
min-width: 320px;
max-width: 426px;
height: 100%;
min-height: 568px;
max-height: 768px;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: auto;
}
JS:
var app = {};
document.addEventListener('DOMContentLoaded', function() {
app.content = document.getElementById('content');
app.sideBtn = document.getElementById('side-btn');
app.sideBtn.addEventListener('click', function() {
if(!app.content.className) {
app.content.className = 'show-side';
} else {
app.content.className = '';
}
});
});
Remove min-height: 568px; from your divs and the scrolling should work. Min-height is forcing the divs to extend past the edge of the browser window.