I was struggling a lot with getting my images to fit inside their parent element. In order to ask a better StackOverflow question, I decided to makde a codepen, but when I did that, the issue was solved? it's still not solved when I run a local server though. Can anyone explain this?
Outer div:
.img-holder{
opacity: .5;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
position: relative;
max-width: 80vw;
display: block;
max-height: 80vh;
}
inside image:
img {
left: 50%;
transform: translateX(-50%);
position: relative;
max-height: 80vh;
}
http://codepen.io/evejweinberg/pen/vgRNWR
Related
I am trying to position a <div> over a photograph of a TV on a wall, so it looks like the <div> is on the TV.
I am sure the solution is in using CSS 3D transforms and so perspective, perspective-origin, transform and transform-origin. However I can't work out values of these which achieve a good result because I'm using trial and error - I don't know the maths.
This is my progress:
And a jsfiddle of it: https://jsfiddle.net/2pye7nc2/
I am setting perspective on the container:
perspective: 500px;
perspective-origin: 210px 382px;
And transform on the element inside it:
transform: translateX(153px) translateY(253px) translateZ(0) rotateX(-12deg) rotateY(-31deg) rotateZ(-20deg);
transform-origin: 0px 150px;
Help is really appreciated.
The best I could do:
.tv .tv-content {
position: absolute;
top: 0;
left: 0;
opacity: 0.75;
width: 392px;
height: 356px;
transform: translateX(193px) translateY(211px) translateZ(0) rotateX(-11deg) rotateY(-40deg) rotateZ(-19.5deg);
transform-origin: 0px 150px;
line-height: 300px;
text-align: center;
font-size: 32px;
background-color: red;
color: blue;
}
https://jsfiddle.net/Lzf2umzf/
Will that help?
I have a modal that I'm centering via this code
.modal {
max-height: 85%;
min-width: 600px;
overflow: auto;
z-index: 10001;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Whenever overflow is triggered (via overflow: auto;) The text in internet explorer blurs. It seems to be a conflict with the css for the transform, but I haven't been able to figure out a winning combination. I've tried some suggestions from other issues (using transform3d and adding translate-z). And adding filter: blur(0). So far no luck.
I will eventually have a grid of embedded YouTube videos on a grid that are each initially covered by an overlay that will contain information about the relevant video. On hovering over the overlay, it slides away, leaving the video visible.
The problem is that once the overlay is out of sight, the hover is no longer in effect, so the overlay returns if you even twitch the mouse over the video. I'm bound to be missing something stupid, but I can't for the life of me figure out what it is.
Here's the CSS
.vid-wrap {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
height: 0;
overflow: hidden;
}
.vid-wrap iframe, .vid-wrap .vid-overlay {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.vid-wrap .vid-overlay {
z-index: 1;
background-color: green;
}
.vid-wrap .vid-overlay:hover {
top: -100%;
transition: all .5s;
}
You can just add this CSS to fix your issue
.vid-wrap:hover .vid-overlay{
top: -100%
}
This should fix your problem.
I'm creating an "Artist Table" at the following URL: http://beta2.thrivemusic.com/artists/
As you can see, if you hover over an artist, 3 social icons appear. However, different bugs appear on different browsers so I need some help with the cross-browser functionality of my code.
FIREFOX: works perfectly
GOOGLE CHROME: Facebook icon link does not work
MOBILE (APPLE + ANDROID): The front side of each artist does not appear on default, the backside is shown instead
Here's how I did it: http://jsfiddle.net/samkimdesign/A7MZ3/2/
/* Artists Flip */
#f1_container {
position: relative;
margin: 10px auto;
width: 200px;
height: 175px;
}
#f1_card {
width: 200px;
height: 175px;
transform-style: preserve-3d;
transition: all 0.4s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
backface-visibility: inherit;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-image: url("http://beta2.thrivemusic.com/wp-content/uploads/2014/07/flip_back.png");
backface-visibility: hidden;
z-index: 9999999999999;
}
Any help would be greatly appreciated, thank you! :)
Try adding
Position: relative
to the class .face.back.
Mine was the same situation. Adding relative position for the back div worked.
I want to create effect of page corner cliping like in turn.js, I know that I need two divs the outside one need to have positive rotation and inside one need the same amount but negative, and both need translate, but I don't know how to calculate the right values.
How can I do this for each corner?
Here is my try.
Here is my try, for a cut-off of 20px:
.page-wrapper {
position: absolute;
overflow: hidden;
width: 400px;
height: 300px;
top: 50px;
left: 50px;
right: auto;
z-index: 12;
background-color: blue;
}
.outter-wrapper {
position: absolute;
overflow: hidden;
-webkit-transform-origin: 100% 50%;
-webkit-transform: translateX(-20px) rotate(45deg);
right: 0px;
bottom: -100%;
width: 200%;
height: 200%;
}
.inner-wrapper {
-webkit-transform-origin: 100% 100%;
-webkit-transform: rotate(-45deg) translateX(20px);
background-color: yellow;
width: 50%;
height: 50%;
right: 0px;
position: absolute;
top: 0px;
}
You need to make the outter wrapper bigger than the inner wrapper; if not you are clipping in places that you didn't intended. I have done it 20%%; this way the math is easier.
Also, you need to adjust it carefully so that you still know the coordinates of the transform origin.
And you don't really need to move it in x and y, it's enough to mevo it horizontally.
demo