I'm building a memory cards game with HTMl, CSS and JS to practice.
This is what I've done so far: https://spomin.krix12.repl.co/
As you can see, the image of the question mark and the image of the flipped card is streched a little bit.
This is the CSS code for it:
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 1px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
memory-card is inside memory-game. How can I fix the streched images? Is there a problem in html(I can provide you the code if needed) or css or should I crop the images itself to some ratio?
I would appreciate your help.
1. First solution:
The first column is using div tag in change of img, which could be a non-feasible solution accesibility-wise. This is how I've done it:
<div class="back-face" style="
height: 100%;
background-image: url('slike/emoji-ji/zaprto.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
"></div>
2. Second solution:
Using flex! (as Hades mentioned below)
Put the img inside a div, then make that div a display: flex;, and turn its content to align-items: center;. The image, in turn, needs a few properties to know how to render width and height, which you can adjust to your needs.
<div class="back-face" style="display: flex;align-items: center;">
<img src="slike/emoji-ji/zaprto.png" alt="zaprto" style="
width: 100%;
height: 50%; // or auto
">
</div>
3. Third and best solution:
Let's use what we learned so far, and change a lot of code around! If you want all of them to look like the third one, here's the steps:
Change the CSS:
.memory-card {
width: calc(25% - 10px);
height: auto;
margin: 1px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
/* add the following lines which used to be in img */
border-radius: 5px;
background: #1C7CCC;
display: flex;
align-items: center;
}
.front-face, .back-face {
/* a few things removed */
width: 100%;
position: absolute;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
/* add the following line to keep consistency */
padding: 20px;
}
And resulting html will look like:
<div class="memory-card" data-framework="gospod" style="order: 4;">
<img class="front-face" src="slike/emoji-ji/gospod.png" alt="vesel">
<img class="back-face" src="slike/emoji-ji/zaprto.png" alt="zaprto">
</div>
Barely any minor changes!
Final Thoughts
Remember, using inline style within your html is an antipattern! Make sure to refactor the code provided into your own css classes.
You can keep the images from stretching by only specifying a specific width or height (but not both).
You might want to wrap the images in a div that sizes to the size of the parrent and centers the image within it (For instance by using a flexbox with justify-content: center; and align-items: center;)
Related
I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)
Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.
I'm not sure if this is really solvable/possible but...
I'm trying to implement a particular animation where my screen is divided in 2 vertically on the first page, but after doing some sort of event (wheel, scroll, click, etc), the layout will animate smoothly to divide the screen horizontally.
If you hover over the first example, I tried to just rotate both inner elements, and then tried to resize the elements based on the new, rotated position. This did not work well.
As you can see, as the elements rotate, there are several issues:
They don't rotate perfectly in sync
You can see the ugly whitespace of the container behind it as it rotates
After rotating, the elements do not fill the container perfectly
I have tried many different things, like using z-index, absolute positioning, tried putting the inner elements in another nested container and then rotating the container, then adding height and width, but again the sizes didn't fit the container. I cannot seem to figure out how to make this work (without Javscript, if possible).
Essentially, the animation I have in mind would make the transition from the Initial Stage to the Final Stage seamless (ie. You wouldn't be able to see the whitespace in the background of the container, and the starting vertical line of separation would just slowly rotate to a horizontal line, while changing the position of the inner elements)
I hope this makes sense? I've been trying to get this animation to work for days...and I am exhausted of options/not creative enough/don't have the knowledge I need; help would be greatly appreciated.
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.container:hover .left {
transform-origin: 100% 50%;
transform: rotate(90deg);
width: 100%;
}
.container:hover .right {
transform-origin: 0 50%;
transform: rotate(90deg);
width: 100%;
}
.left {
background-color: purple;
height: 100%;
width: 50%;
transition: all 2s;
}
.right {
background-color: yellow;
height: 100%;
width: 50%;
transition: all 2s;
}
.container2 {
display: flex;
flex-direction: column;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
}
.left2 {
background-color: purple;
height: 50%;
width: 100%;
}
.right2 {
background-color: yellow;
height: 50%;
width: 100%;
}
Initial Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Final Stage
<p>(width of the container is the viewport; I don't care about if the element extends outside of the viewport during the transtion, but at the final stage, the element must be within it's container perfectly)</p>
<div class="container2">
<div class="left2">
I have content in here that I need fit within this container
</div>
<div class="right2">
I have content in here that I need fit within this container
</div>
</div>
Instead of adding transition to left/ right divs add it to the container div
.container {
display: flex;
border: 1px solid black;
width: 425px;
height: 500px;
margin: 5% auto;
transition: all 2s;
transform: rotate(0deg);
}
.container:hover {
transform: rotate(90deg);
width: 100%;
}
Also Remove transitions and transforms from left right divs
I want to use object-fit CSS rule.
This is not supported in MSIE and MS Edge Browser.
While there are some polyfills for IE, there is none to my knowledge that works in Edge.
E.g. the polyfill fitie by Jonathan Neal works with IE, but not in Edge (at least not on my machine). This is because fitie uses element.currentStyle and element.runtimeStyle which are MS only JS objects which do not any support in Edge browsers anymore. But if I use window.getComputedStyle(element).getPropertyValue('object-fit'), Edge returns nothing.
So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?
img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));
div {
width: 400px;
height: 320px;
overflow: hidden;
}
#i {
display: block;
width: 100%;
height: 100%;
-ms-object-fit: cover;
object-fit: cover;
}
div {
box-sizing: border-box;
border: 1px solid gold;
}
div,
p {
font-family: sans-serif;
font-size: 20px;
width: 400px;
margin: 0 auto;
}
<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Edit
It must be possible somehow, as it is not fully ignored.
The Developer Tools show the rule curly underlined
Bonus question:
Is there any polyfill for object-fit that works in Edge?
You should be able reference it directly:
// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',
window.getComputedStyle(document.querySelector('.test')).objectFit);
// 'rgb(255,0,0)' in both
console.log('color',
window.getComputedStyle(document.querySelector('.test')).color);
.test{ color: red; }
<div class="test">test</div>
That style property will be undefined in browsers that don't support it (like Edge) even with a polyfill.
The problem is that, as far as Edge is concerned: there is no object-fit rule. When Edge parses the CSS it fails to recognise the rule and just skips it. If you shim the behavior with other properties or JS that doesn't change the fact that Edge just doesn't know about it.
So, in answer specifically to "So how do I obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser?" you can do window.getComputedStyle(ele).objectFit to get the value, and it's always undefined (even if successfully shimmed).
For the bonus question: background-size: cover is supported by Edge, so you should be able to set the image as a CSS background to a display:inline-block element and get the behaviour that you want. You can swap out the <img> for a styled <div> fairly easily...
var img = document.querySelector('.i');
// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {
// Create a div
var div = document.createElement('div');
div.className = img.className;
// Set the background image to be the source
div.style.backgroundImage = 'url(' + img.src + ')';
// Set background-size to the object-fit we want
div.style.backgroundSize = 'cover';
// Swap them
img.parentNode.replaceChild(div, img);
}
.test {
width: 400px;
height: 320px;
overflow: hidden;
border: 1px solid red;
}
.i {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="test">
<img src="https://dummyimage.com/640x240/333/444.png" class="i" /></div>
That's just the basic idea - a shim like object-fit-images takes this idea a lot further and supports additional properties like object-position.
Alternatively (and with a lot more HTML) you can keep the <img> tag and wrap it in a container that behaves like it's applying object-fit relative to it. This is what object-fit-polyfill has done.
Both shims should work in Edge.
I want to use object-fit CSS rule.
You don't need to obtain the value of CSS rule object-fit rule with JavaScript in MS Edge browser to be able to make an img cover its parent.
Bonus: No need to use a polyfill and works across all browsers down to IE9
Side note, MS Edge ver. 16 supports object-fit
Here is a solution that works exactly as object-fit: cover, making use of transform: translate and min-width/height.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
If you want you can use CSS #supports to also reset the above properties and add object-fit.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#supports (object-fit: cover) {
#i {
min-width: auto;
min-height: auto;
top: auto;
left: auto;
transform: none;
width: 100%;
height: 100%;
object-fit: cover;
}
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Another overlooked option when one need to use an img because one want to set the image source in the markup, is to use a inline style for the background-image source.
Given the fact, in this case, where a div with fixed width/height sets the boundaries for the image, here is a simple sample of that.
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
background-position: center;
background-size: cover;
}
<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>
Updated
You can of course mimic object-fit: contain as well
div {
width: 400px;
height: 320px;
box-sizing: border-box;
border: 1px solid gold;
margin: 0 auto;
overflow: hidden;
}
#i {
position: relative;
display: block;
max-width: 100%; /* changed to max */
max-height: 100%; /* changed to max */
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>
Updated based on a comment
When it comes to mimic object-fit for video things gets much more complicated.
The video element doesn't respond in the same way an image does.
Here is 4 different samples showing that some video work when mimic cover and some when mimic contain
https://jsfiddle.net/zvtx6uy7/2/ cover with a more square video
https://jsfiddle.net/zvtx6uy7/3/ cover with a more wide video
https://jsfiddle.net/zvtx6uy7/5/ contain with a more square video
https://jsfiddle.net/zvtx6uy7/6/ contain with a more wide video
To achieve a consistent and the same good result as with the image, one need to run a small script to get the video aspect ratio, and then set its width or height to 100% based on its and its container aspect ratio.
Here is another post at SO, simulate background-size:cover on <video> or <img>, which show some more approaches how one can go about this.
One other option I found is to use media query and its max/min-aspect-ratio
Fiddle demo
Src: https://fvsch.com/code/video-background/
I am trying to animate a div upwards when a user hovers on the div.
I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.
See jsfiddle here which demonstrates what my code is currently doing.
Please see code below:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>
You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother
You also need to scale back the text.
See here: jsfiddle
You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3
In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66)
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>
Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)
.box {
display: flex;
justify-content: flex-end;
flex-direction: column;
height: 100px;
border: 1px solid red;
}
.content {
background-color: #e3e4e6;
height: 50px;
width: 100%;
text-align: center;
-webkit-transition: height 1s;
/* Safari */
transition: height 1s;
}
.content:hover {
height: 100%;
}
<div class="box">
<div class="content">TEST</div>
</div>
If you just want to use css, just use:
.content:hover {
margin-top: -50px;
height: 110%;
}
See jsFiddle
since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top:25px;
}
.content:hover {
height: 110%;
margin-top:0;
}
Set top property with the value of height - 100 * -1
https://jsfiddle.net/x3cL1cpt/7/
.content:hover {
height: 110%;
top: -10%;
position: relative;
}
Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.
Replace this CSS with your current, needed to add transition:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
transition: 1s all ease;
}
.content:hover {
transform: scaleY(1.2);
transform-origin: bottom right;
}
Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).
The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?
These are the relevant bits in my stylesheet, mostly covering the text part:
.rightbox {
background: rgb(140, 183, 98);
width: 290px;
height: 160px;
margin-bottom: 18px;
padding: 2px;}
.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;
}
.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}
.rightboxtext:hover span {
height: 80px;
}
This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)
<div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>
Otherwise I achieved this mangled bit of code, where one seems to block the other:
<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>
With this extra bit in the stylesheet:
.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}
Thanks in advance!
As a commenter pointed out above, you can do this entirely with CSS:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
height: 250px;
overflow: hidden;
}
.box img {
width: 250px;
height: 250px;
}
.box .message {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
width: 250px;
height: 250px;
position: relative;
top: -256px;
color: #fff;
font-size: 32px;
line-height: 250px;
text-align: center;
font-weight: bold;
font-family: arial;
}
.box .message:hover {
opacity: 1;
}
</style>
<div class="box">
<img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
<div class="message">Antarctica</div>
</div>
.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.
http://jsfiddle.net/dgGG3/4/
Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.
The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.
.rightbox:hover {
opacity:0.5;
}
You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.
so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/
I would say that's the way to go