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
Related
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/
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 am trying to create a menu bar that height is fixed but squeezes as browser size changes in CSS?
Here is my current CSS which is just the menu bar created in PS with the sizes 1920 X 100, I would like this to stretch the whole top of the page when browser size changes, and for height to stay the same;
#bar {
background:url("/Users/Macbook/Desktop/test website/images/bar.png");
height:100px;
}
Thankyou very much for your help
You can use the property background-size you make your container be width:100% as behave default divs and the background always 100% :
#bar {
background:url("/Users/Macbook/Desktop/test website/images/bar.png") no-repeat center;
height:100px;
background-size:100% 100%;
}
Check this Demo http://jsfiddle.net/RLPbg/.
About compatibility
The problem here is your image is been distorted.
Edit
Remember ir your image is just a png color you alwasy can use other options like:
Repeat background.
Linear Gradients
There are some buttons on this page (the small icons toward the bottom) that I am using some css transitions to change the background of. But there is a flicker the first time the icons are hovered over! I've tried to implement the suggestions offered on this thread, but to no avail. Has anyone an idea on how I can make this work without the flicker?
Thank you so much!
Since no minimal testcase provided, I can suppose your images need to be preloaded, and transitions has nothing to do with the issue.
A background image can be preloaded by specifying it as background for normal (not hover) state of an element, and adding background-position with negative value so that background image is not visible in normal state.
For example:
/* Image is supposed to have height less than 100px here. */
A {
background: url(example.png) 0 -100px no-repeat;
}
A:hover {
background-position: 0 0;
}
By the way, it's established practice to put images for both states (normal and hover) to one physical image file, and then just change background-position on hovering:
/* "rollover-sprite.png" file contains images for both states side by side. */
A {
background: url(rollover-sprite.png) no-repeat;
}
/* Width of image for each state is supposed to be 100px here
(sprite will be ~200px wide). */
A:hover {
background-position: -100px 0;
}
You need to preload the image that you are switching to, the "flicker" is the short delay between you hovering and the image actually loading. There are lots of ways to do this, are you using jQuery?
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.