I have a pure css rollover script which is a series of images each held in their own divs and on hover, the background image slides up so the image theoretically changes.
Is it possible to add a link to the image though? The images are contact icons facebook, twitter, website etc. so ideally upon hover the user can click the icon and go to that link.
I figured adding <a ref=........</a> after and before the div tags would work but that didn't do anything ie. the link isn't recognised and can't be clicked on.
HTML
<div class="fbook-hover social-slide"></div>
CSS
.social-slide {
height:300px;
width: 250px;
margin: 10px;
float: left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -300px;
}
.fbook-hover {
background-image: url('/images/smedia/fbook.png');
}
JSFIDDLE http://jsfiddle.net/26B3h/1/
You were doing it right, instead of "ref" you need to use "href"
http://jsfiddle.net/jonigiuro/26B3h/3/
<div class="fbook-hover social-slide"></div>
Related
I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.
Here's the filter
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.
I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle
Fiddle http://jsfiddle.net/yMHm4/1/
This is not a problem of properties inheritance, as you can think.
The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.
So the only alternatives left are:
1) Change the HTML, as Lowkase suggested
2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.
CSS
.cell{
opacity:0.7;
width:420px;
height:420px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.A1 {
position: relative;
}
.A1:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
#text {
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
.cell:hover {
opacity:1.0;
}
.A1:hover:before {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
fiddle
I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.
Added example using brightness filter (for webkit)
demo 2
You had a couple of HTML errors with your br's, they should be br/, not /br.
The following solution takes the text container out of the image div and places it as an absolute positioned element:
http://jsfiddle.net/yMHm4/3/
#text {
position:absolute;
top:10px;
left:25%;
color:#ffffff;
text-align:center;
font:18px sans serif;
text-decoration:none;
}
<div id="container">
<div id="row">
<div class="cell A1"></div>
<div id="text">
<b>SPINDRIFT KIOSK</b>
<br/>
Digital Collage
<br/>
<i>Mikey</i>
</div>
</div>
</div>
You could probably use "not" selectors in your CSS but I am not sure how cross browser friendly they are. This solution is a more plain jane way to do it.
I´m trying to build up a new site. The work is nearly done, but I need a last detail. I´m using a grid with thumb/headline and link-function to detail sites.
I want to visualize the link-function with some hover-effects (delivered by my template).
This is the link to the project-site - and I´m looking for help on my mainpage:
https://emc.ow-media.de/
If you hover the thumb of the document or the thumbs of the three links at the end of the page, you can see a hover effect. I want to use this effect also on the grid element at the top (the 6 thumbs).
Can you give me a hint, how to get this working with CSS?
Thanks a lot!
You have sample already there. If you inspect the element, you can see how it works. The code the bottom elements use is as follows:
CSS:
figure.sc_image a {
content: '';
width: 100%;
display: block;
height: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
figure.sc_image a {
background-color: rgba(50,172,121,0.8) !important;
}
figure.sc_image a:hover {
opacity: 1;
}
HTML:
<figure class="sc_image sc_image_shape_square">
<img src="https://emc.ow-media.de/wp-content/uploads/2021/06/Leistungen-Potentialanalyse1.jpg" alt="">
<a class="img_icon icon-file-pdf" href="http://emc.ow-media.de/was-wir-tun-detail"></a>
</figure>
Essentially what is happening, is that there is an invisible element a, with set opacity of 0. When someone hovers the element it gets to set the opacity of 1. The animation is done by the transition property, which eases the change of opacity. You can mimic the effect on your other elements.
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/
Im setting my image src in php and controlling the styling in css. I have an image sprite but no matter what I do the image does not seem to clip to the area I want. Im just getting the whole image appear dispite my background-size being set to 24 by 24px.
Note that the img src has to stay in the HTML rather than moving to a bg-image in the css :)
A jsfiddle can be seen here
jsfiddle.net/s6UnV
Any ideas?
#swap li img {
background-position: 0 0px;
background-size: 24px 24px;
display: block;
text-indent: -10000px;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
#swap li img:hover {
background-position: 0 -24px;
}
You shouldn't use the tag img for sprites, you should use a div with a background-image to the one you would like to add the sprite effects.
I updated your jsFiddle here Updated jsFiddle
What i did was the following
Changed the Html to
<ul id="swap">
<li>
<a href="www.google.com" target="_blank">
<div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
</div>
</a>
</li>
</ul>
And added the fb-sprite class style to the css
.fb-sprite{
width:24px;
height:24px;
background-position: 0 0px;
background-size: 24px 48px;
display: block;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
.fb-sprite:hover{
background-position: 0 -24px;
}
Hope it helps
ps: you can also use the opacity effect on this one so the facebook logo doesn't disappear
out of the blue, just a suggestion.
Cheers.
EDIT: Now you can change the url of the img programtically and the style would work. Also Updated the jsFiddle
I have a sprite image with the controls of my slideshow.
I want to change the background position of each control when user hovers over it, so that it looks active.
I am using:
-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;
My code is in this fiddle (apparently the bg image is not my controls but a random image).
I want the transition effect to be what someone would expect when hovering over an item (fade maybe), and not the current one that looks like the bg image actually moves.
Any ideas?
One way you could accomplish this is by placing a hidden span inside your anchor tag with the background-position set to display the area of the sprite you want to show on hover. Initially this span would be hidden with a 0 opacity.
Then, on hover, instead of transitioning the background-position you could transition the opacity to fade it in.
The code would look something like this:
html
<a><span></span></a>
css
a {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-image: url("http://example.com/somepic.jpg");
}
a span {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-image: url("http://example.com/somepic.jpg");
background-position: 150px 210px;
opacity: 0;
-moz-transition: opacity 0.45s;
-webkit-transition: opacity 0.45s;
-o-transition: opacity 0.45s;
}
a:hover span {
opacity: 1;
}
You can demo this at http://jsfiddle.net/hespb/5/
Your code changes the background position.
background-position: 150px 210px;
To make it face you need to change the background color, add opacity and animate it.
background: rgba(255,255,255,0);