A rotated div with overflow hidden, with other internal rotated div with mouse on the hidden part of the inner div, the internet explore detects that the mouse is over the inner div, even with hidden content for another div. This is an IE bug? What better way to solve?
Internet explorer 11 in the code below, to hover over the red box, mouse over on the blue box is also applied. Is it a bug?
div { width: 100px; height: 100px; opacity: 0.5; }
#div_1{ background: #f00; }
#div_2{ background: #0f0; transform: rotate(45deg); overflow: hidden; }
#div_3{ background: #00f; transform: rotate(-45deg); }
#div_1:hover{ opacity: 1; }
#div_2:hover{ opacity: 1; }
#div_3:hover{ opacity: 1; }
<div id="div_1">
<div id="div_2">
<div id="div_3"></div>
</div>
</div>
Related
I'm working on a JavaScript game similar to "2048." It has a tabular display of "tiles" made up of several layers of divs. I'd like to make the selected tile "bounce" using a CSS animation. (The bouncing needs to be able to happen in each of the four cardinal directions: bounce up, down, left, or right, depending on the state of the game.)
My problem is that when I attach an animation, I see the content correctly bounce "in front of" tiles up and left of the selected one, but it incorrectly bounces "behind" the tiles to its right and below it. Here's a JSFiddle illustrating the problem:
https://jsfiddle.net/atqwc8er/2/
I'd like the bouncing blue tile "2" to show up in front of tile "3", the same way it already shows up in front of tile "1". Can anyone help me make it do that?
.tile {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
.tile-inner {
text-align: center;
z-index: 10;
}
.tile-1-0 {
transform: translate(0px, 0px);
}
.tile-1-1 {
transform: translate(55px, 0px);
}
.tile-1-2 {
transform: translate(110px, 0px);
}
.selected .tile-inner {
background-color: blue;
animation: back-and-forth 0.5s infinite alternate;
z-index: 99; /* not working */
}
#keyframes back-and-forth {
from {
transform: translateX(-25px);
}
to {
transform: translateX(25px);
}
}
<div class="tile-container">
<div class="tile tile-1-0">
<div class="tile-inner">1</div>
</div>
<div class="tile tile-1-1 selected">
<div class="tile-inner">2</div>
</div>
<div class="tile tile-1-2">
<div class="tile-inner">3</div>
</div>
</div>
increase the z-index of .selected instead
.tile {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
.tile-inner {
text-align: center;
z-index: 10;
}
.tile-1-0 {
transform: translate(0px, 0px);
}
.tile-1-1 {
transform: translate(55px, 0px);
}
.tile-1-2 {
transform: translate(110px, 0px);
}
.selected .tile-inner {
background-color: blue;
animation: back-and-forth 0.5s infinite alternate;
}
.selected {
z-index: 99;
}
#keyframes back-and-forth {
from {
transform: translateX(-25px);
}
to {
transform: translateX(25px);
}
}
<div class="tile-container">
<div class="tile tile-1-0">
<div class="tile-inner">1</div>
</div>
<div class="tile tile-1-1 selected">
<div class="tile-inner">2</div>
</div>
<div class="tile tile-1-2">
<div class="tile-inner">3</div>
</div>
</div>
Related question to get more details and understand why it cannot work with .title-inner: Why can't an element with a z-index value cover its child?
The z-index attribute should be added to the element at the same level, so pls add the z-index attribute to .title-1-1 instead of .title-inner
I am trying to get the title to stick to the bottom of the hover box, so that when the user hovers over the title, the hover box appears with the title on the bottom. It should close from the title upwards, so that the entire box is covered by the description, but the title remains on the bottom. How do I get the hover box to appear with the title not moving?
I attached my code below so that you can see what I am talking about. When you hover over the h1 pictureTitle, it goes towards the middle of the picture because of the transform effect. I want it to remain at the bottom, and have the black background close upwards from the title, so that the hover box seems like it is a part of the title.
.img__wrap {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
visibility:hidden;
}
.img__wrap:hover .img__description {
opacity: 1;
background:black;
height:100%;
visibility:visible;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle{
background:black;
height:50px;
width:200px;
position:relative;
bottom:70px;
text-decoration:none;
color:red;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture"
class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
1. Title stay bottom issue
The title is staying in the same position. It doesn't move. You need to move it together with the image resizing. As the image is resizing to cover the full img__wrap div, you should change the bottom value of the pictureTitle from 70px to 0px and also add a transition to it. And so, it will move together with the image and always position it self at the bottom of the image
So your question is a wrong. You have to move the title otherwise it will stay in the same position as initially set.
2. Expand black background from bottom to top
Here is another problem with your code. You want to transition visibility:hidden to visibility: visible . This is not possible because you cannot animate non numeric values like visibility:hidde/visible or display:none/block. You should just use opacity:0 and opacity:1 on hover.
Then position the img__description at the bottom ( bottom:0 without top:0 ) and add an initial height of 0px . Then at hover add height:100%
Let me know if you have other questions. Cheers! :D
.img__wrap {
position: relative;
height: 190px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: 0.2s;
margin: 0;
background: black;
height: 0;
}
.img__wrap:hover .img__description {
opacity: 1;
height: 100%;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle {
background: black;
height: 50px;
width: 200px;
position: relative;
bottom: 70px;
text-decoration: none;
color: red;
transition: 0.5s;
}
.img__wrap:hover .pictureTitle {
bottom: 0;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture" class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
use picture of 200x200 if your want to use height or for now add height:200px to class .picture image will stretch but it will resolve your problem, so instead of this use a perfect image 200x200
I'm trying to rotate object using: transform: rotate(90deg); and applying transform-origin: right bottom;. But there I get different transformation behavior depending on where I place transform-origin: either to parent element or to :hover state.
Why does those differences happens?
div {
width: 100px;
height: 100px;
transition: all 1s ease-in;
}
.main:hover {
transform: rotate(90deg);
transform-origin: right bottom;
}
.main2 {
transform-origin: right bottom;
}
.main2:hover {
transform: rotate(90deg);
}
/*********BG colors*******/
.main, .main2 {
background: green;
}
.wrapper {
background: red;
float: left;
margin-right: 20px;
}
<div class="wrapper">
<div class="main">Transform-origin on :hover state</div>
</div>
<div class="wrapper transform">
<div class="main2">Transform-origin on parent element</div>
</div>
With .main2, you're initializing transform-origin to right bottom, but with .main, you're setting the origin on :hover. Because of this, CSS is trying to tween between the default origin (the center of the element) and right bottom - creating this odd effect.
Why when I use position absolute and percentage width I have this glitch when I hover on div above?
There is example. I have this glitch on little more complicated site.
<div class="box"> text </div>
<div class="container">
<div>
.box {
width: 50%;
height: 50%;
background: red;
}
.box:hover {
transition: 0.5s;
-webkit-transform: translate(0, 6px);
}
.container {
position:absolute;
top:40px;
width:40%;
height:50px;
float:left;
background: blue;
color:white;
}
http://jsfiddle.net/TsUEH/
When you hover on red text then width of blue div are shaking.
How can i avoid this without removing percentage and position absolute?
It works fine for me, but if you find an element "shaking" (esp in Chrome), it's likely because of the translate function not working with the z-index correctly
If you need to fix it, you can use this code (lifesaver):
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Consider the following attempt to rotate a paragraph 90 degrees and position it so that the corner that was initially its top-left corner (and which therefore becomes its top-right corner after the rotation) ends up located at the top-right corner of the parent block.
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<p id="text">Foo bar</p>
</div>
</body>
</html>
CSS:
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
transform: rotate(90deg);
position: absolute;
top: 0;
right: 0;
}
In Firefox 19.0.2 on OS X 10.6.8, it fails. This appears to be because, despite the order in which the CSS properties were given, the transformation is applied after the positioning. In other words, the browser:
places #text such that its top-right corner is located at the top-right corner of the parent block, but only then
rotates it, with the result that what is now its top-right corner is not located at the top-right corner of the parent block.
As a result, the transform-origin property isn't much use here. If, for instance, one used transform-origin: top right; then #text would need to be moved downwards by the width it had before it was rotated.
My question: is there a way to tell the browser to apply the CSS positioning properties after the rotation; and if not, then is there instead a way to move #text downwards (e.g. using top:) by the width it had before it was rotated?
NB. Ideally the solution should not require setting a fixed width: for #text, and must not require JavaScript.
You can apply more than one transform to an element, and the order does matter. This is the simplest solution: http://jsfiddle.net/aNscn/41/
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
background: lightBlue;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translate(100%) rotate(90deg);
transform-origin: left top;
-webkit-transform: translate(100%) rotate(90deg);
-webkit-transform-origin: left top;
}
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Rotating -90deg.
.rotate {
position:absolute;
-webkit-transform-origin: left top;
/* Safari */
-webkit-transform: rotate(-90deg) translateX(-100%);
/* Firefox */
-moz-transform: rotate(-90deg) translateX(-100%);
/* IE */
-ms-transform: rotate(-90deg) translateX(-100%);
/* Opera */
-o-transform: rotate(-90deg) translateX(-100%);
}
Solved: here
This is the code I've added:
left: 100%;
width: 100%;
-webkit-transform-origin: left top;
I've also added some prefixed transform properties so it will be cross browser
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
How I did it:
I've found this question and, as the name of the website says, "fiddled" with the code to obtain this behavior. I guess the solution is left: 100%; instead of right: 0;.
(the width: 100%; is there because for some reason it wasn't 100% and the text would overflow to the next line)
You may want to try using CSS3 #keyframes animation. It will allow you to rotate and reposition in any order you like. Here is a tutorial that may help: [CSS-Tricks][1]
.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
p {
border: 1px solid blue;
position: absolute;
top: auto;
right: 0;
display: inline-block;
margin: 0;
animation: 1s rotate 1s both;
}
#keyframes rotate {
0% {
transform-origin: top left;
transform: rotate(0deg);
right:0;
}
50% {
right:0;
}
100% {
transform-origin: top left;
transform: rotate(90deg);
right: -64px;
}
}
<div class="container">
<p>some text</p>
</div>
You might want to play around with the translate option which you can apply as the second transform function after rotate and place your element at the exact position that you want to.
There is no other way I guess to tell the browser to use the position properties after the transform function is used using plain css.
See this demo - http://codepen.io/anon/pen/klImq
Place "!important" at the end of the transform line.