I made an hover effect in my website that references an image that is the original image in 65% of opacity. The problem is, and this only happens one time, only the first time i hover it everything shakes/tremble a bit, but then everything starts working just fine. Perhaps something missing in my hover code? Can you see what's wrong?
Thanks for the help :)
The css code I'm using:
#rebface
{
content:url("http://static.tumblr.com/g1c47pc/Td2n783c4/nface.png");
position:relative;
left:8%;
margin-left:20px;
display:block;
box-sizing: border-box;
}
#rebface:hover {
content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png");
transition: 0.5s linear;
position:relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The HTML:
<div style="margin-top:20px; display:flex;">
<a target="_blank" href="http://www.facebook.com/sharer.php?u={Permalink}"><div id="rebface"></div></a>
</div>
You can see it here: (This website only works in chrome/safari for now)
http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de
You are swapping the images in the CSS content attribute. I'm quite sure these arent cached on page load so they are loaded when hovering what causes a short flickering.
You can simply avoid that by using opacity instead of another image.
.facebook
{
content:url("http://static.tumblr.com/g1c47pc/jhDn7hp40/sitef_1.png");
left:50px;
z-index:2;
position:absolute;
top:110px;
left:0px;
z-index:50;
}
.facebook:hover {
opacity: 0.6;
-webkit-backface-visibility: hidden;
}
And as a side note -- use background instead of adding a background image via the content attribute. It works for older browsers and is much more of a best practice.
In your css you have the following:
#rebtweet:hover{ some-styles }
#rebface:hover{ some-styles }
#rebtumb:hover{ some-styles }
#rebgplus:hover{ some-styles }
Each of these has one common style: transition: 0.5s linear;
Try removing this style. I'm not sure, but it may solve your flickering issue.
Hope this helps.
Related
I am creating a website for a project and got stuck with an issue.
I was trying to implement the hover feature, where when I hover over the image it gets zoomed in. That part works nicely, however, I was having an issue when I hover over the last book in the first row. When I hover over that, the entire screen becomes glitchy. This feature is not working as I hoped, i.e. smooth and good to work with. I have attached the image and the code I have.
Thanks for any help!
.books img{
width:200px;
height:300px;
}
.books img:hover {
position: relative;
left: 45px;
width: 300px;
height: 400px;
display: block;
}
I found some code online using -mox-transform and -webkit-transform, however, I have never worked with that before. This seemed complex for me. Any suggestions if I should learn how that works instead of perfecting the above code?
By increasing the width and height on hover the surrounding layout must adapt to that size change. The browser must move the surrounding elements to provide the space for the larger element, that is why it is glitchy.
If you want to do it properly, you will probably have to use transform, as you mentioned.
For your use case it should not be hard. Try this:
.books img {
width: 200px;
height: 300px;
transition: transform 200ms; /* optional transition with 200ms duration */
}
.books img:hover {
transform: scale(1.1); /* scale to 110% */
}
All you need to use is scale property to scale the image. Change your code to this
.books img:hover {
transform: scale(1.5);
}
This should do what you are looking for.
Use transform CSS Property with scale() which is used to increase or decrease the size of an element
.books img:hover {
transform: scale(1.2);
}
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);
}
Background:
Finding improved ways to use CSS, I came across the proposition of using image transitions for good effects.
After a few stumbles, I managed to do this with the help of some references to make a smooth transition in hover.
Now I want it automatic and with links in each picture, but I'm at a loss at the code.
Current JSFiddle:
None, JSFIDDLE doesn't accept IMG and I can't show there.
<div class="container">
<img src="sky.jpg">
<img class="front" src="bear.jpg">
</div>
.container
{
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img
{
position:absolute;
transition: opacity 1s ease-in-out;
}
.container img.front:hover
{
opacity:0;
}
Problem:
This HTML-CSS works but for a single image switch (2 images) on hover, not for multiple ones automatically.
Need:
A change in the code which allows multiple switches using CSS and HTML only, with different links on each image.
I know there are possibilities with JQUERY and JAVACRIPT, I wish for a solution without these two.
Solution Code restrictions and parameters:
No JQUERY nor JAVASCRIPT
Multiple browser compatibility (doesn't need to be very old ones)
Possibility of multiple links in each image switch
Many Thanks for all help provided.
Try this you have to move your cursor a slight (shake it a bit) to see the change in the link notice the change in the link http://jsfiddle.net/fc3nb5rL/1/
i used z-index instead of opacity
.back {
z-index:1;
}
#-webkit-keyframes anim {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.back:hover {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2 {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.front:hover{
-webkit-animation:anim2 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
I am trying to do a simple image fade on rollover - works fine and smooth in Chrome, but Firefox is a bit jumpy. I've tried doing the backface-visibility trick on the container, but still no luck.
Anyone have any ideas?
JSFiddle
HTML
<div class="link-box large">
<div class="image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt="">
</div>
</div>
CSS
.link-box .image img { transition: all .2s ease-out; width:200px; }
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
My best guess is that setting the width of the image to 200px and leaving the height unspecified is causing the browser to calculate the height of the image. If the height calculates to a nice whole number it isn't an issue. If the height calculates to a decimal it may be the cause of the problem.
In this case the natural dimensions of the image are 275px by 183px.
By changing the width of the image to 200px you are shrinking the image to 72.727272...% of its natural size.
275/200 = 0.727272... Or if you prefer fractions: 275(8/11) = 200
Now running the same equation on the height yields:
183(8/11) = 133.090909...
It looks like, under the normal run of things, the partial pixels are cropped, but during the transition the partial pixels aren't being cropped, and the image is warped slightly to show the partial pixels within the same height.
Cropped down to 133px:
Not cropped and slightly warped:
Now that we have a good hypothesis on what's causing the problem, on to the solutions:
You can hard code the height of the image:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
height: 133px; /* manually set the height */
}
Or if you would rather not hard code the height, you can also fix the issue with an anti-alias hack, just add a box-shadow.
Working Example
.link-box.large:hover .image img {
opacity: .65;
box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */
}
Or if you're concerned about the cross-browser compatibility of using a box-shadow, you can also use a transparent border:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
border: 1px solid transparent; /* add transparent border */
}
Works good on my Firefox.
Anyway you can try to add some special attributes that will prepare the browser for the transition and actually render the element with possible transformation in mind.
Such an attribute is transform: translate3d(0,0,0);
Like this :
.link-box .image img {
transition: all .2s ease-out;
width:200px;
transform: translate3d(0,0,0);
}
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
I'm trying to make some text appear over an image when the image is hovered over.
This is typically a simple process, however apparently :hover doesn't work if the first div (for example)
first.div:hover second.div {
over (in my case an image) is using relative positioning instead of absolute.
There are lots of images in this page and they are set up as tables through CSS with attributes such as display:table; so I don't think I have the option of switching to absolute positioning. I know CSS tables aren't generally condoned, but I absolutely have to do it this way.
Right now I'm using opacity changes to try to make the text appear. I've tried using z-index too, but I think the problem is that the :hover effect doesn't work well with absolute positioning. What workarounds, if any, are available?
I'm not opposed to using languages other than HTML/CSS, but I'm pretty inexperienced and I don't understand them, so I'd prefer a CSS work around for this, but beggars aren't choosers.
As requested, here's some code:
HTML
<div class="cell"><img class="box" src="image1.jpg"><div id="text">Text text text</div></div>
CSS
.cell {
position:relative;
display:table-cell;
background-color:black;
width:700px;
height:auto;
}
#text {
display:table;
position:absolute;
z-index:999;
color:#fff;
text-align:center;
width:100%;
top:48%;
left:0;
}
img {
max-height:600px;
max-width:600px;
height:auto;
width:100%;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
opacity:0.4;
z-index:2;
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
opacity:1.0;
}
I'm not sure on what's causing this so I included a lot more than necessary... I'm a little new to coding so take it easy on me, but I can't get cell.div:hover #text { opacity:1;} to work. I read somewhere that this is because hover effects don't work with relatively positioned divs...
I am not getting you proper, what is your issue. And if you are clear to you have problem in only opacity, then you can use css as below.
first.div:hover second.div {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75; }
If it's not work for you, then please share your code or live link, then explain you proper.
you can just use opacity to achieve this. Make sure you are targeting the pic on hover. Check out this fiddle.
http://jsfiddle.net/Davidicus/69ZTN/
Wow, literally 30 seconds after I took the time to post all of my code I found a solution. I used div.cell:hover #text {
opacity:1; }
and everything worked. Not sure what I was doing wrong it was a late night and probably tried to do something dumb like img.box:hover #text commands. Anyway disregard this question guys, and thanks