Got an image filter on hover and there is an absolute div on top of it, which cancels the hover effect of underlying image when hover. I need the image filter stay even when .absolute is hover
simplified html
<div class="parent">
<div class="absoulte"><p>Hover bttn</p></div>
<img src="blabla.jpg">
</div>
and the css
.parent img:hover{
filter: brightness(0.5) saturate(0.4) hue-rotate(190deg);
}
.absoulte {
width:100%;
position:absolute;
text-align:center;
opacity:0;
z-index:9
bottom:100px;
}
.parent:hover .vieitembtn {opacity:1;}
I suspect the problem is bad syntax.
You need a value for text-align (or remove it altogether) and closing semicolons on all properties.
Fixed CSS:
.parent img:hover{
filter: brightness(0.5) saturate(0.4) hue-rotate(190deg);
}
.absoulte {
width:100%;
text-align:center;
center;opacity:0;
z-index:9;
bottom:100px;
}
.parent:hover .vieitembtn {opacity:1;}
I think you just need to add -webkit-filter: instead of just filter I made a jsfiddle for you you dont really need all of that other stuff though I am not sure what you are trying to do though...
http://jsfiddle.net/322kxppm/
<div class="parent">
<p>Hover button</p>
<img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg"/>
.parent{
text-align: center;
}
img:hover{
-webkit-filter: brightness(.5) saturate(.4) hue-rotate(190deg);
}
Related
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
I have some images that I use CSS to make a darker background.
This makes the images darken on hover. It can be seen at rtsb.co.uk on the main images.
However when viewing the images, the background is shown slightly behind the images, seen as a grey stripe under each image. the images are 600px height, but for some reason, the code for 'outerLink' makes it 607px height and so the bar appears, this can be seen using Chrome dev tools when viewing the page.
.outerLink {
background-color: #e8e8e8;
display: block;
opacity: 1;
filter: alpha(opacity=100);
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
I've tried looking at everything to find where this added 7px comes from but I can't find it anywhere.
Even if I change the name of the CSS to .outerLinktest, the tag above still seems to pick up a height of 19px from somewhere.
I cannot add a height CSS attribute to .outerLink as the page is dynamic for mobiles etc and the images resize due to this so won't always be 600px high.
Have you tried to put
display:flex;
instead of
display:block;
in outerLink?
.outerLink {
background-color: #e8e8e8;
display: flex;
opacity: 1;
filter: alpha(opacity=100);
}
I've tried it with the inspector and it works.
Snippet:
.outerLink {
background-color: #e8e8e8;
display: flex;
opacity: 1;
filter: alpha(opacity=100);
}
img.darkableImage {
opacity: 1;
filter: alpha(opacity=100);
display: block;
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
also make the image display:block;
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block; /*<----*/
}
or change outerlink background color into white maybe...
Use display:block; on img class.
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block;
}
Snippet:
.outerLink
{
background-color:#e8e8e8;
display:block;
opacity:1;
filter:alpha(opacity=100);
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
display:block;
}
<a href="/collections/sale" class="outerLink">
<img src="//cdn.shopify.com/s/files/1/1234/4330/t/6/assets/promo_image_1.jpg?12217915569807539649" alt="Sale" class="darkableImage" onmouseout="this.style.opacity=1;" onmouseover="style.opacity=0.7;">
</a>
Check Fiddle
You may set position attributes to your classes :
.outerLink
{
background-color:#000;
display:block;
opacity:1;
filter:alpha(opacity=100);
position:absolute;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
position: relative;
top:0;
left:0;
}
I have an image which I've faded out using opacity css. The opacity of the image returns to 1 when hovered.
However, in Firefox, it appears to "jump" a little when hovered over. It seems to be something to do with the way Firefox smooths the image while faded - is there a way around this?
Here's a fiddle:
http://jsfiddle.net/jngS8/5/
<div class="container">
<a class="opacity">
<img src="http://imgur.com/EhiSptf.png" />
</a>
</div>
CSS:
img {
height: auto;
max-width: 100%;
}
.container{
width:200px;
}
.opacity {
opacity: 0.6;
}
.opacity:hover {
opacity:1;
}
Set
-moz-backface-visibility: hidden;
on the image.
Source: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/.
That article is talking about CSS transitions, but looks like it works without transitons, too.
http://jsfiddle.net/jngS8/6/
When I apply transition in Chrome(24.0.1312.57) on hover it does not update background-color on mouse out. See this fiddle: http://jsfiddle.net/WKVJ9/
Here is the code:
.transition{
-webkit-transition: all 500ms ease-in-out;
}
.wrapper{
width:200px;
height:200px;
display:block;
background-color:cyan;
position:relative;
}
.hoverme{
border-radius:90px;
display: block;
width:50px;
height:50px;
top:50px;
right:-90px;
position:absolute;
-webkit-transform: rotate(-45deg);
}
.wrapper:hover .hoverme{
-webkit-transform: rotate(0deg);
right:0;
}
.hoverme:hover{
background-color:red;
}
and html:
<div class="wrapper">
<div class="hoverme transition">
Hover me
</div>
</div>
If you hover .wrapper and .hoverme and then quickly move mouse away from this box the .hoverme element will only animate rotation and position.
On the site I am working on it does not even refresh hover state so when the animation is finished and the background stays with :hover background-color... Which for some reason I cannot reproduce here
Is it possible to make the background animate?
This is happening because of position:absolute in .hoverme
try changing it to position:relative add margin-left:150px; (or required) to correct position of .hoverme ... like this:
.hoverme{
border-radius:90px;
display: block;
width:50px;
height:50px;
top:50px;
right:-90px;
position:relative;
margin-left:150px;
-webkit-transform: rotate(-45deg);
}
check it in action here: http://jsfiddle.net/WKVJ9/1/
Update: The original phrasing of this question was vague so i've modified it to better express what i'm asking.
Lets say I have two divs
<div class='button'>A</div>
<div class='button green-button'>A</div>
with the following styles:
div.button {
/* define position, size, etc ...*/
color:#FBB
background-color:#F00
}
div.button.green-button{
color:#BFB
background-color:#0F0
}
In this example it was easy to shift the hue of the first button from red to green by simply changing shifting the values of color and background-color by 1 digit. If I wanted to make a blue button I could do the same shift again for a 3rd button.
However, in the case where I don't want to shift completely from one color to the next its a bit trickier.
Additionally I want to color shift everything in the div, not just the background-color and color properties. So if I were to place and image in the div the colors of the image would get shifted as well.
Is this possible in CSS? If not can you do it in Javascript?
Since everyone is posting wild guesses, I'll jump right into it.
You could achieve something using CSS filters (in your case hue-rotate)
Or the same using a CSS preprocessor like LESS.
Do you mean like this:
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
background-color:red;
}
Or are you looking for something that figures out the color offset on it's own?
If you are there is CSS3's filter: hue-rotate(angle);
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
-webkit-filter:hue-rotate(250deg);
-moz-filter:hue-rotate(250deg);
-ms-filter:hue-rotate(250deg);
filter:hue-rotate(250deg);
}
Yeah, you'll need multiple elements though.
HTML:
<div>
<span class="over-bg"></span>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
span.over-bg { background-color:#22FF00; display:none; }
div:hover span.over-bg { display:block; }
http://jsfiddle.net/TeCvr/1/
Another approach using pseudo-elements:
HTML:
<div>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
div:hover:before { display:block; content:""; position:absolute; left:0;
top:0; height:100%; width:100%; background-color:#22FF00; }
http://jsfiddle.net/TeCvr/2/
Well you could use CSS3 supported transition style rules like:
.button:hover {
background-color: #F0F0F0;
-webkit-transition: background-color 1ms linear;
-moz-transition: background-color 1ms linear;
-o-transition: background-color 1ms linear;
-ms-transition: background-color 1ms linear;
transition: background-color 1ms linear;
}
Is there any specific reason as to why you would like to achieve this..? I can't think of any application as such; unless you came across this while reverse engineering a design and couldn't find the CSS that caused this behaviour..?
Reference:
http://www.css3.info/preview/css3-transitions/
I don't know if i understand you. You can change the class of the div. For example .button to .buttongreen with diferent properties.
Without using color and background-color properties, you can still use:
background-image: linear-gradient(to bottom, #006e2e 0%,#006e2e 100%)
That's a gradient from a given color to the same color but the whole gradient is not a color in CSS.