Ok guys, I have this in the style.css of my website.
.asia{
margin-left:40px;
background-image:url('../resources/img/asia.jpg');
width:100px;
height:75px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.asia:hover{
background-image:url('../resources/img/asia2.png');
width:100px;
height:75px;
}
these are two images, that I will use on my homepage by putting
<div class="asia"></div>
and everything is set for them to show up like an animation when hovering over.
The only problem is that on the laptop everything works fine, the index.html shows me all the images and the hover efect works well but when uploading and testing it on the server the images do not show up.
What is the problem? What am I doing wrong?
Could I make a suggestion, instead of having two files, perhaps combine them into one image.
Then, on hover you can update the background-position. This way, your document won't need to request another file from the server (good for people on mobile, and conserving downloads) as well as preventing a 'flicker' while the page hangs without its file and loads it in. Here's an example of the implementation.
.imageContainer {
background: url('../resources/img/asiacombined.jpg') no-repeat 0 0;
}
Let's assume the image is 100px tall.
.imageContainer:hover {
background-position: 50px /*x axis, shifting to the top of the next image in the file*/ 0 /* Y axis */;
}
Hopefully this helps.
Ps.
You can also use top, left, right, center, bottom to align content.
Related
I'm experimenting a "zoom and blur" css effect. So when I hover over an image, it's supposed to blur out and scale a bit, while contained in a div with overflow:hidden.
However, when running in Chrome, there's always a weird glitch. A blurry white border shows up around the container while the transition is going.
I'm wondering if there's a better way of doing it? Or a method of circumventing it? Thanks a lot!
You can see a gif demonstrating the problem: http://imgur.com/SrK5rXq
And the same code running in firefox as a comparison: http://imgur.com/942LBKV
Note the borders within the image.
And below is my code:
<style>
#img0{
width:500px;
height:auto;
}
.hoverBlur{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
}
.hoverBlur:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
transform:scale(1.1);
-webkit-filter:blur(15px);
-moz-filter:blur(15px);
filter:blur(15px);
}
.container{
margin:200px;
width:500px;
height:333px;
border:1px solid #ccc;
overflow:hidden;
}
</style>
<div class="container">
<img id="img0" src="test.jpg" class="hoverBlur"/>
</div>
This is a REALLY old thread but I ran into this issue and couldn't find the solution published anywhere else so I'm posting it here:
You can fix this by adding a margin to the image that is the same size as the blur size (in this case 15px) then transform: translating the image back into place.
https://jsfiddle.net/zeojxtvb/
So in our example, a blur(15px) is applied to the image. So also apply the following to the image:
img {
...
margin: 15px;
transform: translate(-15px, -15px);
}
I've been experimenting with CSS transitions lately, and I keep running into an issue when making shrinking headers.
In my example, the script C and The Corbo Group are both transparent PNGs. I'm adding a shrink class through jQuery and using CSS transitions to handle the animation.
When the transition completes, there is around 1 second of pixelation before the browser anti-aliasing completes. Is there any way to prevent this?
I've tried using transform: translate3d(0, 0, 0);
But that seems to cause the image to stay in the pixelated state.
Here's an example of my css
header img.corbo-c {max-width:118px; margin:20px 0 0 -38px; transition:all 0.25s ease;}
header.shrink img.corbo-c {max-width:60px; margin:10px 0 0 -20px; transition:all 0.25s ease;}
Pen Demonstrating Issue:
http://codepen.io/roachdesign/pen/BoOGYy
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}
I have implemented the nivo slider (with default theme) successfully except for one issue.
The left arrow on the slider is showing a small part of the right arrow. The right arrow on the other hand is being displayed correctly.
How come the left side of the sprite is not rendered properly but the right one is?
Arrow picture
The only place where the arrow.png picture is declared is in the next css section:
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../Images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
Thanks.
If you look right below that class in the nivo-slider css you will notice some classes called a.nivo-nextNav and a.nivo-prevNav which are applying a background position.
The left property on a.nivo-prevNav must be wrong for the distribution of the plugin you have. If you adjust that to say 11px (you will have to play with it, to get it just right) it will fix your problem.
How to make images move automatically + on mouseover in CSS/HTML?
For example Ek Main Aur Ekk Tu Movie Site
It's actually really easy to do with CSS3:
.moveMe
{
width: 150px;
height: 40px;
background: #f01;
position: absolute;
top: 0;
-webkit-transition: top 2s;
-moz-transition: top 2s;
-o-transition: top 2s;
}
.moveMe:hover
{
top: 10px;
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
-o-transition: top 0.3s;
}
This tells the element onHover to transition between the two states of top over a period of 2 seconds and 0.3 seconds when the mouse leaves.
Check it out here: http://jsfiddle.net/HGjQC/'
As this is a CSS3 technique, the code here will only work in webkit browsers (Chrome, Safari, any other browser using the Chromium engine [Rockmelt]), Opera and Mozilla browsers.
For IE, yoy'll probably need to use Javascript for now until MS decides to implement more CSS3.
It uses something called parallax effect. I found a jquery plugin that seems to help do this kind of effects. The plugin is called Plax, here is the demo
you could make an invisible div, and then use the query .attr() tag to change the image on hover. I'm not sure I get your question though, because I couldn't find the site that wanted to base yours off of.
Maybe you can use JavaScript, like this:
http://jsfiddle.net/HGjQC/2/