I have to show a list of image, but since a lot of them have a portrait aspect ratio I want to be able to show the images with smaller heigth, but not stretched, and when the user click them they will expand... I was able to do it changing the max-height, but the transition on mobile are very bad, so I want to use transform and scaleY to improve performance. The problem is that the image get stretched.
For example if this is the image, normal:
I want to make it to look like this, stretched:
And when the user click it the image return to the initial state.
This is my current code:
CSS
.card img, .card video{
width: 100%;
vertical-align: middle;
border-radius:2px;
object-fit:cover;
will-change: max-height,height;
transition: max-height 0.4s ease;
}
HTML
<div class="card">
<div>
<img src="image.jpg"/>
</div>
</div>
And then in Javascript I simply set maxHeight of the img in onclick event.
Thank you!
Here is my code
.image_container img {
margin: 0 auto;
object-fit: cover;
position: absolute;
top: 54%;
left: 50%;
width: auto;
height: auto;
max-height: none;
max-width: none;
min-height: 100%;
min-width: 100%;
-webkit-transform: translate(-50%, -50%);
vertical-align: middle;
}
Related
I have two divs like so and they are placed in the footer of my website :
divs in question
And here is my code :
.upNextCard{
/* Rectangle 68 */
position: absolute;
width: 214.29px;
height: 255.69px;
margin-left:300px;
margin-top:139px;
background-color:#E0B21C;
transform: rotate(-12.08deg);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.5s;
pointer-events: visible;
}
.upNextCard:hover {
margin-top: 120px;
}
.upNextBanner{
/* Rectangle 69 */
position: absolute;
width: 65.31px;
height: 47.17px;
background: #FE9C9C;
transform: rotate(-12.45deg);
margin-left: 400px;
margin-top: 98px;
pointer-events: visible;
}
Is there a way I can trigger both by hovering over the big box?
Yes, just chain them for a hover on the big box.
.bigbox:hover .upNextBanner{
Etc....
}
.bigbox:hover .upNextCard{
....
}
It would be easier if you post you html code to see the relation amongst divs
look at this https://www.w3schools.com/css/css_combinators.asp
it may help you
I have a test layout like below
<div id="parent">
<div id="child">Hover me</div>
</div>
i need all offsets to increase or decrease when the element's size changes.
so i tried it on Hover function in CSS3 like this.
#parent {
height: 200px;
background: lightgray;
}
#child {
position: relative;
top: 50%;
left: 50%;
width: 100px;
padding: 30px;
background: red;
text-align: center;
transition: transform 0.5s;
transform: translate(-50%,-50%);
transform-origin: center top; /* which origin to scale from */
}
#child:hover {
transform: translate(-50%,-50%) scale(1.5);
}
<div id="parent">
<div id="child">Hover me</div>
</div>
Everything seems alright but I need a way of achieving the same thing using JavaScript or jQuery but basing all calculations on the exact element not it's parent since an handling dynamic content.
I have block for images carousel, for example. I know nothing about picture sizes. I want to vertically and horizontally align images to center. One special thing is that i need wrapper above image, so i can set little plates with username. So i use max-width:100% and max-height:100% for center and middle aligning like this
How to vertically align an image inside div
So i have this code
.container{
position: relative;
width: 100px;
height: 100px;
border: 1px solid;}
.frame-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;}
.frame {
/* equals max image height */
position:relative;
display: inline-block;
border: 1px solid red;
white-space: nowrap;
max-width: 100%;
max-height: 100%;
height: 100%;
box-sizing: border-box;
vertical-align: middle;}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;}
img {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;}
<div class="container">
<div class="frame-wrapper">
<span class="helper"></span>
<div class="frame">
<span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
</div>
</div>
</div>
Problem appears when the image have height is bigger than container. When it happens picture oversize the wrapper and for fixing it I set height:100% to wrapper and picture fits inside it. What I am asking about here is that in FF browser when I set height: 100% to wrapper image is scales, but wrapper doesn't follow it and still have original width.
So you can open this in any browser instead Firefox and look how it must work
JS Fiddle if you want
http://jsfiddle.net/crazyboris/pd3v2kp8/1/
Do you have any ideas why is this happening?
It's because your .frame-wrapper doesn't have height and width specified being an absolute positioned container. Add:
height: 100%;
width: 100%;
I have a question on how to go about making a div that when you hover it, an image on the inside will move up into the div.
This is my code so far:
<div id="div1">
<div id="div2">
<img src="http://dummyimage.com/300x300/000/fff" width="300px" height="300px">
</div>
</div>
css
#div1 {
width: 300px;
height: 300px;
border: 2px black solid;
position: absolute;
top: 100px;
left: 500px;
overflow: hidden;
}
#div2 img {
position: absolute;
top:200px;
}
This image that sits in the div1 sits at the bottom of the div, the rest of the overflow is hidden. I want it to move up when the div is hovered.
Any idea on how to go about this? I was going to use the transform css and translateY it but I'm not sure if there is a better way that this can be done through JQuery.
Let me know what you think
Here is pure css approach with transition on hover
#div1 {
width: 300px;
height: 300px;
border: 2px black solid;
position: relative;
overflow: hidden;
}
#div2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in;
}
#div1:hover img {
top: 30%;
}
<div id="div1">
<div id="div2">
<img src="http://placehold.it/350x150">
</div>
</div>
#div1:hover #div2 img{
top: 100px; //change this number to get correct placement
}
Use :hover on your CSS and specify a new location for the image when you hover. You can even animate it so it "glides" into position.
You have the image unnecessarily wrapped in a div. just assign the id to the image itself
<div id="div1">
<img id="div2" src="http://www.maceire.com/wp-content/uploads/2015/01/grey- bac kground-1-wide-hd-background-and-wallpaper.jpg" width="300px" height="300px">
</div>
Then you can manipulate to top css value
var q = document.getElementById('div2');
q.style.top = '0px';
and
q.style.top = '200px';
to move up and down
For performance and simplicity, use CSS if possible and resort to javascript when you need to support legacy browsers. Your needs here could easily be solved using just CSS:
#div1 { width: 300px;
height: 300px;
border: 2px black solid;
position: absolute;
top: 100px;
left: 500px;
overflow: hidden;
}
#div2 img {
position: absolute;
top: 80%;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#div1:hover #div2 img {
top: 0%;
}
This approach does not require you to know the dimensions of the image.
I'm looking for an easy solution to implement the below. Thumbnails will not be cropped but the container they are in will always be the same height/width.
The idea is that images larger than the container would be responsive (ie. scale down), while images that are smaller than the container will be shown "as is."
The problem I'm having is three-fold:
How to handle the responsive element, since we need to account for various aspect ratios (ie. horizontal vs vertical vs square)
How to vertical align when necessary
Images that aren't larger than their container natively shouldn't scale up
Obviously, it would be great if this could be done with CSS only, but I understand javascript might be needed. If that's the case, I'm looking for a lightweight solution since the grid of thumbnails could get quite lengthy.
Any thoughts?
A pure CSS solution:
demo
.container {
display: inline-block;
position: relative;
width: 8em; height: 10em;
}
.container img {
position: absolute;
top: 50%; left: 50%;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
transform: translate(-50%, -50%);
}
The images keep their natural size (width: auto; height: auto;) unless they are bigger than the container (max-width: 100%; max-height: 100%;), in which case they are going to take the size of the container that they exceed and scale the other one accordingly.
Positioning the images in the middle of the container: give them position: absolute and put their top left corner in the middle of the container (top: 50%; left: 50%;). Then translate them left and up by half their computed dimensions, whatever those would be (transform: translate(-50%, -50%);).
This solution works in browsers supporting 2D transforms. Sadly, this excludes IE8 and older and Opera Mini.
A better compatibility solution (that I cannot actually test right now in IE8, so I'm just assuming it should work there too) would be:
demo
.container {
display: inline-block;
width: 8em; height: 10em;
text-align: center;
white-space: nowrap;
}
.container img {
display: inline-block;
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
.container:after {
display: inline-block;
height: 100%; width: 0;
vertical-align: middle;
content: "";
}
First of all, give images display: inline-block;.
Set text-align: center; on container so that images that are less wide than the container get centred horizontally.
Now to make sure they are in the middle vertically as well. Give them vertical-align: middle;, but that's not enough. inline-block elements are vertically aligned with respect to their inline-block siblings and we have no siblings in this case. So we also need another middle vertically-aligned inline-block element that has the same height as the container. Or a pseudo-element on the container, it's the same thing.
This pseudo-element is going to have height: 100%; so that its vertical middle coincides to that of its parent and width: 0; so that it doesn't affect the horizontal alignment of the image (when the image's natural width < the container's width). It's also going to have display: inline-block; and vertical-align: middle; just like the image.
We also need white-space: nowrap; on the container to prevent the pseudo-element from moving below (and not affect the vertical alignment of the image this way) when the image occupies the entire width of the container.
This is actually the first question I asked on Stackoverflow! Now I know Ana has already come up with a working solution, I thought I'd also post mine that works IE8 onward:
http://jsfiddle.net/crtpq2jg/
Basic Markup:
<div class='container'>
<img src='http://www.lorempixel.com/100/200' />
</div>
CSS:
.container {
float: left;
width: 180px;
height: 210px;
text-align: center; /* to center align horizontally */
line-height: 210px; /* Equal to container height */
font-size: 0; /* This is to eliminate a weird ~2px vertical offset on the images. But you can just specify the font-size for any children elements that may contain text. */
}
.container > img {
width: auto; height: auto;
max-width: 100%; max-height: 100%;
vertical-align: middle;
}
This will work in IE 8 (demo)
Html from ana's answer
The trick is to use the after pseudo element to extend the containers line-height to its own height.
This way you can use regular text-align and vertical-align along with max-width and max-height.
.container {
display: inline-block;
position: relative;
border: solid .25em deeppink;
width: 8em;
height: 10em;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.container img {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.container:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
Have a look at this jsfiddle: http://jsfiddle.net/jQN4L/
The max-width and max-height cause the image to scale down if needed, but not scale up. Horizontal centering is done with text-align. Vertical centering is done with line-height and vertical-align, although this method does require that the container has a known height.
HTML:
<div id="d1">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
<div id="d2">
<img src="http://i.imgur.com/VAZNIev.jpg" />
</div>
CSS:
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
div {
text-align: center;
font-size: 0;
}
#d1 {
width: 200px;
height: 100px;
line-height: 100px;
background: red;
}
#d2 {
width: 100px;
height: 200px;
line-height: 200px;
background: green;
}
Changing my answer- should have read the question better!
html:
<div class="img_wrapper">
<img class ='full_width' src="1.png" />
<img class ='full_width' src="2.png" />
<img class ='full_width' src="3.png" />
</div>
css:
.img_wrapper {
width: 860px;
margin: 30px;
}
.full_width {
width: 200px;
height: 200px;
float: left;
margin: 10px;
vertical-align: middle;
}
.full_width img {
max-width: 100%;
max-height: 100%;
}