CSS3 Image Overlay Effects Example

Learn how to create awesome image overlay effects with CSS3, add style to your images and photographs with these cool overlay effects.

HTML CSS JavaScript Output Live Updates

body {
	font-family: Arial, Helvetica, sans-serif;
    padding: 70px
}
.overlay-fade,
.overlay-slide {
	position: relative;
    box-sizing: border-box;
    height: 280px;
    width: 220px;
    overflow: hidden;
    float: left;
    margin: 10px;
}
.overlay-fade:hover div {
	opacity: 1;
    transition: all 0.2s ease-in;
}
.overlay-fade div {
	position: absolute;
    box-sizing: border-box;
    top: 0;
    background-color: rgba(255,255,255,0.3);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.2s ease-in;
}
.overlay-fade a {
	box-sizing: border-box;
	text-decoration: none;
    display: block;
    color: #eeeeee;
    background-color: #1c5bb1;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 130px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    font-size: 12px;
    font-weight: bold;
}
.overlay-slide:hover div {
    transform: translate(0, 0);
	transition: all 0.2s ease-in;
}
.overlay-slide div {
	position: absolute;
    box-sizing: border-box;
    bottom: 0;
    transform: translate(0, 100%);
    padding: 15px;
    background-color: rgba(0,0,0,0.5);
    text-align:center;
    transition: all 0.2s ease-in;
}
.overlay-slide h2 {
	margin: 0;
    font-size: 18px;
    color: #eeeeee;
}
.overlay-slide p {
    font-size: 14px;
    color: #dddddd;
}