im trying to make Grid system with HTML and CSS but when i add some images to the system some of them jump all around(i think that it's because of pixels mismatch) and when i resize the window(because it should also be responsive) they line up kinda of funny and i don't understand where is my problem. So i'm asking you for help. Here is JSFiddle from my work.
i think that i should modify this line to make it work but im not sure.
problem is margin is in pixels and the width is in %. so 15% * 5 + 23*5 > 100% of the screen.
you need to shift the margin to % so that the sum is always 100.
15*5 = 75;
remaining space for margins = 25% / 5 = 5 for each box
so
change your column styling to
.column{
margin:23px 2.5%'
}
the shifting problem
have a look at the code:
every p has a background
#farbig_logo_mercedes {
background: url(http://www.seat-styler.de/wp- content/uploads/2017/02/Mercedes_logo_ori.png) no-repeat center top;
}
means the image is of full size and is shifted only top 65 pixels is shown and is center aligned.
and the same p has a child img with the same src
<img class="logos_bild alignnone" src="http://www.seat-styler.pl/wp-content/uploads/sites/7/2017/02/Mercedes_logo_edit.png" alt=" Mercedes Logo" width="65" height="65">
this has a specific height and width and the image adjusts into the 65x65 sqaure.
this is the image that is displayed. on hover, the opacity of img tag is set to 0 leaving the background image to show.
when there is difference in alignment of these two images, your icons dance on hover.
it is adviced NOT to use two images , one in bg and other as src especially ina responsive design like this.
if you want to use two images, use both as background
p{
background-image:url(1)
}
p:hover{
background-image:url(2)
}
or you could use filters on img
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: sepia(100%);
opacity:0.5
}
img:hover{
filter:none;
opacity:1
}
broken column #2
this is because .farbig_logo_ford has a height greater than the others;
add
.column{ max-height:113px;}
also consider using flex
.row{ display:flex; flex-wrap:wrap;}
.column{width:15%;}
remove float
https://jsfiddle.net/pmzg1nbu/3/
Related
I'm working on a photo gallery that will zoom the images during mouse over. Because the page is created dynamically, I won't know the image sizes.
To keep the image quality good, the images are full size and the CSS shrinks them to 50%. On mouse over, the images enlarge to 100%. The problem is that the div blocks take up the original unzoomed-out image size on the page, making spacing a nightmare. (spacing is as if all images were original size)
My thought was to enclose the "zoomed out" div with a parent div (imgholder below) that has it's width permanently set to 50%, this div won't change size when moused over, and should take care of the spacing issue.
This works somewhat if I set the imgholder width\height to a set value (say 300px). But since the images are all different sizes, I need to set the parent div to a percent of the child..
What would be the recommended way to set the parent sizes?
Is there a maybe a better way to do the zoom effect for a photo gallery? (I can't think of a way to use backgrounds since again the images are loaded dynamically)
my CSS is similar to...
.zoomout{
display: inline-block;
position: relative;
-moz-transform:scale(.5);
-webkit-transform:scale(.5);
-o-transform:scale(.5);
}
.zoomout:hover{
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
.imgholder{
display: inline-block;
width:200px; /*this is where i run into problems*/
height:200px; /*this is where i run into problems*/
}
my HTML is similar to...
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/4.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/5.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/6.jpg"/></div></div>
I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".
This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.
For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.
Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.
A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.
I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)
Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.
"Link"
My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.
If you'd like me to make a fiddle, just ask and you shall be given.
Thanks for reading, hope I made myself clear, English not being my primary language.
EDIT: Here's a fiddle showing how the <img> <div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up)
L.
The main issue here is the vertical alignment of images that are cropped (in your case portrait orientated images).
If you can go with default alignment of these images, this means only the top of the image is shown, you can use this technique :
FIDDLE
The CSS I added/modified from your example :
.galleryItem a{
display:block;
position:relative;
padding-bottom:50%;
overflow:hidden;
border-radius: 5px;
}
.galleryItem a img {
position:absolute;
width: 100%;
height:auto;
display:block;
}
I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. This was my solution:
min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;
The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. 'Max-height' was used as the control factor due to the rarity of portrait pictures exceeding a 1:2 ratio; meaning to control the excess of width cutoff through a height variable.
As for positioning the image inside the div, I recently found the use of this excerpt very useful:
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;
With 'margin' and 'padding' at '0', you're cutting off excess weight on the pic. '-webkit-transform: translate' will allow you to change the item's origin or pick point. Setting this to '-50%, 0%' will set the origin to the center-top of the pic (this should always have negative values for the origin to be inside the item). 'left: 50%; top: 0%;' will set the placement of the origin of the item to be at center-top of the container.
In all latest browsers(supposing your not using IE anymore) you can use "object-fit" for this purpose. just add this css:
.center-cropped {
object-fit: cover;
object-position: center;
height: 200px;
width: 270px;
}
...
And in html, you can use this class directly in the img tag:
<div>
<img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>
This will show only a "centered" version of your image, for both portrait and landscape images
So far i have this
<img src="1.png" onmouseover="this.src='hover1.png'"
onmouseout="this.src='1.png'" class="HomePortfolioLeft image1" />
The original image will change into another image while hovering, and i have achieved this.
But the problem is that it just snaps to the other image on hover and it is really unpleasent.
To appeal to my designers side and to keep the client happy, i want to put a transitions between the images. ( when hovered, a transition and then the next image)
How can i do this.
All help is appreciated. Thank you for your effort :D.
You could do this without javascript using background-image as a preloader of second image.
LIMITS :
img has to be a known size.
not as many effects possible as in between 2 elements.
HOW does it work.
using the box-model, you can set to 0 width and height switching values to padding to keep at every step of transition the same outer size.
here some examples : http://codepen.io/gc-nomade/pen/Joqzp/
shrink image down to middle would be :
img {
/* known size */
height:80px;
width:150px;
/* size to switch to padding */
padding:0;
/* preloaded image to switch to ,visually */
background-image:url(image2.jpg);
/* transition timing */
transition:0.5s;
}
img:hover {
/* size */
height:0px;
width:0px;
/* padding to resize the box and show background-image*/
padding:40px 75px;
/* timing*/
transition:0.5s;
}
This would help u.. How to Hover over image
I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.
Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?
Here's some good information about image opacity and transparency with CSS.
So to make an image with opacity 50%, you'd do this:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.
You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.
A great article explaining how to use CSS sprites.
Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
a button
The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.