Back to Snippets

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.

347

#img

/HTML *CSS ()JS 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;
}

CSS3 Image Overlay Effects Example

Share Code Snippet