Related
I've tried many approaches to get this working correctly, but with no success.. I notice that this question has been asked a few times already, and i've tried the solutions i've found.. but with no success..
So i'll upfront say sorry if someone of you find this question as a duplicate :(
The hovered element is "food-box", and the element which needs the scale-animation is "food-box-image" :
<div class="food-box">
<div class="food-box-image" style="background-image: url(myimage.jpg);"></div>
... and i'm trying to get the animation working like this :
.food-box:hover ~ .foox-box-image {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
border:8px solid red;
}
but it will not fire :
the only way i got it working, is with specifying .food-box-image:hover, but then it will not fire when hovering the needed div element..
Here's complete code (which runs) :
Anyone know how to do this ?
.fixedbuttons-container {
position: absolute;
width: 100%;
}
.buttons,
.fixedbuttons {
display: flex;
flex-flow: row wrap;
}
.fixedbuttons > * {
width: 25%;
}
.fixedbuttons > * > * {
width: 100%;
text-align: center;
}
.food-box-container {
padding: 10px;
}
.food-box {
flex: 1;
position: relative;
background-color: white;
min-height: 300px;
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
border-color: #666666;
border: 1px solid #666666;
word-wrap: break-word;
margin: 0 !important;
padding: 0 !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover ~ .foox-box-image {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
border:8px solid red;
}
.food-box .food-box-image {
position: absolute top: 0 left: 0;
background-size: cover;
width: 100%;
min-height: 150px;
background-color: #ffffff;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.food-box .food-box-content {
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
position: absolute bottom: 0 left: 0;
word-wrap: break-word;
width: 100%;
min-height: 150px;
background-color: #ffd531;
color: #000000;
font-size: 80%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
}
.food-box:hover > .food-box .food-box-content {
background: yellow !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box .food-box-badge {
display: table;
background: #ffffff !important;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 12px;
color: #000000;
text-align: center;
-webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
padding-left: 10px;
padding-right: 10px;
}
.food-box .food-box-badge span {
color: #666;
display: table-cell;
vertical-align: middle;
line-height: 1.2em;
word-wrap: break-word;
}
<div class="fixedbuttons-container">
<div class="fixedbuttons">
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
</div </div>
The first is the typo foox* to be replaced with .food-box:hover > .foox-box-image as pointed out by #panther
Now if you want to only scale within the container box apply overflow: hidden to the wrapping container which is food-box
Hope this is what you are expecting.
.fixedbuttons-container {
position: absolute;
width: 100%;
}
.buttons,
.fixedbuttons {
display: flex;
flex-flow: row wrap;
}
.fixedbuttons > * {
width: 25%;
}
.fixedbuttons > * > * {
width: 100%;
text-align: center;
}
.food-box-container {
padding: 10px;
}
.food-box {
overflow: hidden;
flex: 1;
position: relative;
background-color: white;
min-height: 300px;
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35);
border-color: #666666;
border: 1px solid #666666;
word-wrap: break-word;
margin: 0 !important;
padding: 0 !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover {
cursor: pointer;
-webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35);
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box:hover > .food-box-image {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.food-box .food-box-image {
position: absolute top: 0 left: 0;
background-size: cover;
width: 100%;
min-height: 150px;
background-color: #ffffff;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.food-box .food-box-content {
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
position: absolute bottom: 0 left: 0;
word-wrap: break-word;
width: 100%;
min-height: 150px;
background-color: #ffd531;
color: #000000;
font-size: 80%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
}
.food-box:hover > .food-box .food-box-content {
background: yellow !important;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.food-box .food-box-badge {
display: table;
background: #ffffff !important;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 12px;
color: #000000;
text-align: center;
-webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
padding-left: 10px;
padding-right: 10px;
}
.food-box .food-box-badge span {
color: #666;
display: table-cell;
vertical-align: middle;
line-height: 1.2em;
word-wrap: break-word;
}
<div class="fixedbuttons-container">
<div class="fixedbuttons">
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
<div>
<a>
<div class="food-box-container">
<div class="food-box">
<div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div>
<div class="food-box-badge"><span>Sydhavsmeny</span></div>
<div class="food-box-content">
adslkfjaølkfj
</div>
</div>
</div>
</a>
</div>
</div </div>
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 1 year ago.
I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.
This is the css for my button.
a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}
a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#greenhover), color-stop(100%,#89af37))
}
If you're wondering about #green and #greenhover, I'm using .less to make my css.
Anything wrong with this? Any ideas?
Sadly, you really can't transition gradients for now.
So, the only workable workaround is using an extra element with needed gradient and transition it's opacity:
a.button {
position: relative;
z-index: 9;
display: inline-block;
padding: 0 10px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
background: -webkit-linear-gradient(top, green, #a5c956);
background: -moz-linear-gradient(top, green, #a5c956);
background: -o-linear-gradient(top, green, #a5c956);
background: linear-gradient(top, green, #a5c956);
}
.button-helper {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
background: -webkit-linear-gradient(top, lime, #89af37);
background: -moz-linear-gradient(top, lime, #89af37);
background: -o-linear-gradient(top, lime, #89af37);
background: linear-gradient(top, lime, #89af37);
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
a.button:hover .button-helper {
opacity: 1;
}
<span class="button-helper"></span>button
it's tricky.. and of course tricky is cool ;)
okay.. i got a solution. and it's basically done via amazing :before selector
#cool-hover{
width: 120px;
height: 120px;
display: block;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
margin: 0px auto 24px auto;
transition: all 0.5s;
position: relative;
overflow: hidden;
}
#cool-hover:before{
border-radius: inherit;
display: block;
width: 200%;
height: 200%;
content: '';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);
transition: all 0.5s;
transform: translate(-25%, -25%);
z-index: 0;
}
#cool-hover:after{
border-radius: 9px;
display: block;
width: 108px;
height: 108px;
margin: 6px;
background: url('https://i.imgur.com/w0BjFgr.png');
background-size: cover;
content: '';
position: absolute;
top: 0; left: 0;
z-index: 1;
}
#cool-hover:hover:before{
transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
box-shadow: 0 0 35px rgba(0,0,0,0.3);
}
<div id="cool-hover"></div>
NOTE : i just added the :after sudo class just for the small on top image placeholder purpose..
have a nice awesome styling ;)
I know this pretty old but I could not find any good solution yet. So here is my solution
First Make gradient on ":before and hide it with opacity then transition opacity 1 on hover.
https://jsfiddle.net/sumon380/osqLpboc/3/
.button {
text-decoration: none;
padding: 10px 25px;
font-size: 20px;
color: #333;
display: inline-block;
background: #d6e9eb;
position: relative;
z-index: 1;
transition: color 0.3s ease-out;
}
.button:before {
background: #91a5f4;
background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.button:hover:before {
opacity: 1;
}
.button:hover {
color: #fff;
}
<a class="button" href="#">Button</a>
You can fake gradient transitions using drop shadows!
For instance, from one of my pages:
c {
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-webkit-transition: background-color .5s ease-in-out;
transition: background-color .5s ease;
}
Followed by:
c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}
Here, you are essentially using an inset shadow as a Photoshop-like mask, causing a gradient effect on the underlying element. On hover, you invert the effect.
If you're doing the slight highlight when hovering the button there is a much simpler solution. You can just nudge the gradient down a bit and have the background-color be the same as the top color of your gradient: http://cdpn.io/oaByI
It's pretty limited I know, but if works well for that use case.
I know this question is pretty old, but I found a good way to animate basic gradients that will work in some cases.
This method will let you animate a change in color of the gradient but not a change in the position of the color stops.
https://jsfiddle.net/62vzydeh/
HTML:
<div class="button">
Click Me!
</div>
CSS:
.button {
width: 200px;
height: 30px;
margin: 50px;
padding-top: 10px;
color: #C0C0C0;
background: linear-gradient(to left, #F8F8F8, transparent 30%);
background-color: #808080;
text-align: center;
font-family: sans-serif;
cursor: pointer;
transition: background-color 500ms;
}
.button:hover {
background-color: #A0A0A0;
}
a hacky way i tried was putting lots of <spans> to replicate "position", CSS only hack here: https://codepen.io/philipphilip/pen/OvXEaV
9 years, but this time, hope my styled-components can help someone:
import React, { ReactNode } from 'react'
import { Button as ButtonUI } from "#your-library-ui"
import styled from 'styled-components'
type Props = {
onClick?: () => void;
children?: ReactNode;
};
const Button = ({onClick, children}: Props) => (
<StyledButton onClick={onClick} >
{children}
<ButtonHelper />
</StyledButton>
)
export default Button
const ButtonHelper = styled.span`
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
background: linear-gradient(to right, #5ab0f4, #1273ea)!important;
transition: opacity 0.2s linear;
`;
const StyledButton = styled(ButtonUI)`
position: relative;
z-index: 1;
background: linear-gradient(to right, #1273ea, #1c94f4)!important;
color: #fff;
&:hover ${ButtonHelper} {
opacity: 1;
}
`;
And start using your new designed component with extra effect! Thanks to #kizu for the suggestion.
you must have same style in source and changed style in target.
like
a {
background: transparent;
background: linear-gradient(transparent,transparent);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover
{
background: #abc07c;
background: linear-gradient(#c5db95,#88a743);
}
section#lBox{
background-color: rgb(168, 0, 0);
border: 1px solid rgba(0,0,0,.15);
border-radius: 0px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 4px rgba(0,0,0,0.2);
margin: 100px auto; /*aligns center*/
padding: 24px;
width: 500px;
opacity: 0.5;
-webkit-transition: all 5s linear;
transition: background-color 5s;
-moz-transition: all 5s linear;
}
section#lbox:hover {
/*background-color: rgba(168, 0, 0, 0.8);
box-shadow: 0px 0px 500px; */
opacity: 0.8;
}
I have been trying to fix it for half an hour and can't seem to find why the transition isn't working. It is supposed to make the translucent box more opaque when the mouse cursor is over it.
Look at this:
section#lBox {
That has a capital letter B in lBox.
Then look at this:
section#lbox:hover {
This has a lowercase b in lbox.
Assuming your box has an id="lBox", the hover opacity: 0.8 part will not work, as CSS is case-sensitive, and lbox and lBox are two different things.
So what you should do is just change this:
section#lbox:hover {
To this:
section#lBox:hover {
And it should work.
I'd like to implement small circles (touch points) with a onmouse over effect (circles would become bigger on mouse over and contain a few lines of text) - see jsfiddle http://jsfiddle.net/eRDy6/1/
I've tried to adapt some code found on the web but struggling to do 2 things:
I can't get the word "read" centered (vertically and horizontally) to the middle of the circles. How could I achieve this.
I'd like a different text to be displayed onmouse over in the big circles. What would be the best way to do this?
Many thanks for your help
<div class="middle clear">
<div id="touchPointContainer">
<div id="touchPoint1" class="touchPoint">
<p>read</p>
</div>
<div id="touchPoint2" class="touchPoint">
<p>read</p>
</div>
<div id="touchPoint3" class="touchPoint">
<p>read</p>
</div>
</div>
</div><!-- End DIV Middle clear -->
CSS:
.middle {
display: block;
clear: both;
margin-right: auto;
margin-left: auto;
width: 980px;
background: red;
box-shadow: 0px 0px 10px 2px #e0e0e0;
-webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
-moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
}
#touchPointContainer {
height: 600px;
background: green;
position: relative;
}
.touchPoint {
height: 60px;
width: 60px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.1);
position: absolute;
text-align: center;
color: #5bb6e7;
font-size: 12px;
-webkit-transition: width .2s, height .2s, margin .2s;
-moz-transition: width .2s, height .2s, margin .2s;
-o-transition: width .2s, height .2s, margin .2s;
-ms-transition: width .2s, height .2s, margin .2s;
transition: width .2s, height .2s, margin .2s;
}
.touchPoint:hover {
height: 160px;
width: 160px;
margin: -40px 0px 0px -40px;
-webkit-transition: width .2s, height .2s, margin .2s;
-moz-transition: width .2s, height .2s, margin .2s;
-o-transition: width .2s, height .2s, margin .2s;
-ms-transition: width .2s, height .2s, margin .2s;
transition: width .2s, height .2s, margin .2s;
}
#touchPoint1 {
top: 260px;
left: 140px;
}
#touchPoint2 {
top: 240px;
left: 360px;
}
#touchPoint3 {
top: 180px;
left: 720px;
}
To vertically center text we need to set display: table-cell to the element and display: table to its container.
To switch contents on hover, you can make an hidden text element and show it when the container is being hovered (and hide the first one).
So to do what you want, add these classes:
.touchPoint {
display: table;
}
.touchPoint p {
vertical-align: middle;
display: table-cell;
}
.touchPoint .final,
.touchPoint:hover .initial {
display: none;
}
.touchPoint .initial,
.touchPoint:hover .final {
display: table-cell;
}
jsFiddle Demo
Ok, I have the following code: https://jsfiddle.net/7u1aLxaw/
So the issue is that when you hover over an image, it shows an overlay with a name specific to that image. But if the name is longer than the image width, the image immediately to the right is pushed away and the overlay isn't centered on the image. It expands just to the right, not on both sides.
I can't work out how to center the overlay and avoid it effecting divs on either side of it.
*I tried using display: none, but I want to preserve the CSS3 transitions. Using display: none to completely remove the element removes the CSS3 transition.
Any ideas?
Change your .item_overlay style to:
.item_overlay {
height: auto;
width: auto;
margin: 0 auto;
margin-top: -95px;
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Making the position absolute ignores the other elements position, then setting a negative top margin moves it back to the top. http://jsfiddle.net/q8SER/2/
Working jsFiddle: http://jsfiddle.net/q8SER/3/
I had to change a whole bunch of stuff to make it work.
First of all, I changed the HTML structure and placed the overlay div before the icon div.
Here is the new overlay CSS:
.item_overlay {
position: absolute;
z-index: 1;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
Now, because the inner div (overlay) overflows the parent div, I couldn't center it conventionally with auto margins, so I implemented a jQuery solution.
JS code:
$(".item_overlay").each( function() {
var offset = ($(this).parent().width() - $(this).width()) / 2;
$(this).css("left", offset + "px");
});
Hope that helps.