I've installed the newest version of Nivo Slider, 3.2, on my website and it works fine in Firefox and Chrome, but in IE8 the slide links do not work. I have searched and tried a bunch of solutions, such as adding to my CSS:
.nivoSlider a, .nivoSlider img {
display: block !important;
}
But that only works on the first image of the slider, the rest of the images do not link to their assigned pages.
My site is here, click "Truck Sales" up top
CSS is here
Thanks for any help!
This is a known issue with nivo slider, add the following css:
.nivoSlider a.nivo-imageLink{
display:none;
filter: alpha(opacity=0);
opacity: 0;
-webkit-opacity:0;
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
background-color:#fff;
}
.nivoSlider a.nivo-imageLink img{
display:block!important;
}
It happens because IE has problem rendering an empty <a> without a background.. I've ran into this when a long time ago I wanted to place a link over a flash element. giving it a background and setting opacity to 0 will make it work correctly without harming the design.
This didn't work for me, but I found another solution:
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter: alpha(opacity=0);
/other than IE/
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
line-height: 375px; /*Change this to the height of your image*/
font-size: 0px;
}
.nivoSlider a.nivo-imageLink img{
display:block!important;
}
Now add some text in front of each image link:
TEXT GOES HERE<img src="yourimage.jpg" alt="image" />
It's a little hacky but it does the trick. -Cheers
Related
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.
I need to make a css animation with element and its pseudo :before
CSS and at the same time keep the ablility to print the last state:
.pump:before {
content:"";
width:100px;
border: 1px solid #0ca3da;
top:-4px;
left:-1px;
height:100px;
display:inline-block;
position:relative;
}
.pump {
height:10px;
width:50%;
top:4px;
background:#0ca3da;
display:inline-block;
position:relative;
animation: pump 1s;
}
#keyframes pump {0% {width: 0px;}}
#-webkit-keyframes pump {0% {width: 0px;}}
.wrap {
display: inline-block;
width : 95px;
}
#pmp {width:34px;}
on the screen I need to animate it like here: http://jsfiddle.net/iskren/L3khm/6/
and on the print media I need to show last state of the move only
In Google Chrome I use ctrl+p and my Options for Printing "Background colors and images" was turned off. So question now is there any way to set this option to on when chosen to print
The answer turned out to be in this thread for webkit user:
https://stackoverflow.com/a/14784681/3345926
using:
body{
-webkit-print-color-adjust:exact;
}
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
Let's say that this is my HTML.
<div id="spirit_tutorial_reward">
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div>
<div id="spirit_tutorial_reward_header">45 Spirit</div>
<div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div>
</div>
And this is my styling:
#spirit_tutorial_reward
{
position:absolute;
top:77px;
left:371px;
width:45%;
}
#spirit_tutorial_reward_icon
{
background:url(../images/gift_icon_spirit.png) top no-repeat;
width:60px;
height:60px;
position:absolute;
top:0px;
left:0px;
float:left;
}
#spirit_tutorial_reward_header
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:0px;
float:left;
}
#spirit_tutorial_reward_text
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:22px;
float:left;
}
On no-zoom or normal mode , the images appear to have chopped off on Firefox (see attached image) but when I zoom my page , the image appears to becoming better (see attached image). I am facing this issue only in Firefox. Can anyone here help me out.
EDIT : FIDDLE demo for the problem
This worked for me in one of my recent encounters. This prevented the image from being cut off:
transform: rotate(0.0001deg);
Try setting background-size to 59px which i did in that fiddle and worked as expected.
i.e
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div>
If this answer was helpful.Dont forget to mark to apport or mark as answer
Thanks
AB
I think it's a subpixel problem. That's the reason the image works fine in some zoom modes.
I edited your jsFiddle to set the background-size to 99.9%, and then works properly. You can see the example here.
Note: I put the !important to overwrite the inline styles... feeling lazy, you know ;)
If you want the background image to cover whole page.. apply the image to background and give background size:cover to it..
you may try this:
body {
background-image: url(your-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: cover;
}
you may refer this http://www.css3.info/preview/background-size/
I tested on Chrome, Opera, even Internet Explorer, my below css works as expected.
.carousel
{
position:relative;
overflow:hidden;
width:100%;
margin-bottom:0px;
}
.carousel-inner
{
font-size:0;
position:absolute;
width:6882px;
}
.carousel-item
{
background-repeat:no-repeat;
background-position:0px 0px;
display:inline-block;
cursor:pointer;
margin:0px 16px;
}
But when I tested on Firefox, .carousel-inner is not hiding overflowing element.
In order to add the same effect, I need to add float:left to .carousel-inner, which renders width:100% to be ignored.
Is there another work around specific to Firefox?
I tried clear:both with no luck.
Here is jsfiddle example
And image (Chrome, IE, Opera) :
Firefox :
Cheers !