I have multiple elements, their background colors are different from each other. like:
<div class="element"> Content of the DIV</div>
<div class="element2"> Content of the DIV</div>
.element{
width:100px;
height:50px;
background-color:#888888;
}
.element2{
width:100px;
height:50px;
background-color:#222222;
}
I want to make hover like:
.element:hover, .element2:hover{}
When I bring mouse over the element, only background should be little bit lighter. I don't want to use opacity: 0.4
(lightens whole div) or background-color:rgba(50,50,50,0.5);
(only for one color)
JSFIDDLE
The easiest way to achieve this is to simply apply a background-image
to your elements on :hover
. Either using a CSS gradient (which I generated using ColorZilla's "Ultimate CSS Gradient Generator"):
.element:hover,
.element2:hover,
.element3:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}
.element {
width: 100px;
height: 50px;
background-color: #888888;
}
.element2 {
width: 100px;
height: 50px;
background-color: #222222;
}
.element3 {
width: 100px;
height: 50px;
background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}
<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>
Or using a partially-transparent image:
.element:hover,
.element2:hover,
.element3:hover {
background-image: url(http://i.stack.imgur.com/5udh0.png);
}
.element {
width: 100px;
height: 50px;
background-color: #888888;
}
.element2 {
width: 100px;
height: 50px;
background-color: #222222;
}
.element3 {
width: 100px;
height: 50px;
background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
background-image: url(http://i.stack.imgur.com/5udh0.png);
}
<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>
This works because of the 'stacking' order of the background properties; the background-color
sits at the back and the background-image
sits 'above' that layer.
References:
Here is a Fiddle and you should wrap your content into divs so you can apply rgba(255,255,255,0.5)
to them:
.element{
width:100px;
height:50px;
background-color:#888888;
position:relative;
}
.element2{
width:100px;
height:50px;
background-color:#222222;
position:relative;
}
.element:hover > div, .element2:hover > div{
/* what can we put here? */
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.5);
}
<div class="element"><div>Content of the DIV</div></div>
<div class="element2"><div>Content of the DIV</div></div>
this is a trick that uses the way stacking contents are rendered, backgrounds always below contents (even if it belongs to a higher stack):
fiddle
div {
width:100px;
height:50px;
z-index:2;
position:relative;
}
.element {
background-color:#888888;
}
.element2 {
background-color:red;
}
.element3 {
background-color:cyan;
}
div:hover:after {
content:'';
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
opacity:0.5;
z-index:-2;
}
<div class="element">test</div>
<div class="element2">test</div>
<div class="element3">test</div>
if you're interested in the explanation check this answer
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With