3 Unique and Creative CSS3 Image Effects

May 14, 2018inWeb Design

Learn Front-End Development


While these CSS3 effects are "responsive" in nature, they contain properties that are best rendered and viewed on non-mobile devices.

Frosted Glass Effect

The goal here is to create a more elegant, transparent image overlay that allows for readable text to be placed inside.

To achieve this goal, we use HSLA (Hue, Saturation, Luminosity, Alpha) to create a background for the overlay. We give the container and the overlay's pseudo, before element the background image we want to use. Next, we blur the overlay's before element and give the overlay's before element a negative margin to ensure that the blur stays within the bounding div.

"Digital design is like painting, except the paint never dries."
-Neville Brody

<style>
.frosted-container {
height: 637px;
box-sizing: border-box;
margin: 0;
}
.frosted-container {
background: url("/blog/images/mountains_blog.jpg") 0 / cover fixed;
}
.frosted {
position: relative;
margin: auto;
padding: 1em;
max-width: 65%;
height: 50%;
top: 25%;
background: hsla(0,0%,100%,.35) border-box;
overflow: hidden;
border-radius: .5em;
box-shadow: 0 .5em 1em rgba(0, 0, 0, 0.6);
}
.frosted::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: -30px;
z-index: -1;
transform: scale(1.5);
-webkit-filter: blur(20px);
filter: blur(20px);
background: url("/blog/images/mountains-dark.jpg") 0 / cover fixed;
}
.frosted-container .frosted p {
position: relative;
font-style: italic;
font-size: 40px;
color: black;
font-family: 'Cormorant Garamond', serif;
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
font-weight: 500;
display: block;
margin: auto;
text-align: center;
line-height: 1.25;
top: 20%;
}
.frosted-container .frosted p > .cite {
color: black;
font-style: normal;
font-family: 'Montserrat';
font-weight: 700;
text-transform: uppercase;
font-size: 15px;
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}
@media(max-width: 767px) {
.frosted {
max-width: 85%;
height: 50%;
top: 25%;
}
}
</style>
<div class="frosted-container">
<div class="frosted">
<p>"Digital design is like painting, except the paint never dries."</p>
<br>
<span class="cite">-Neville Brody</span>
</p>
</div>
</div>

Tinted Images

Desaturated images with a tint can be a really unique and creative way to style a group of images and create a unique feel within a website. The goal here is to use CSS filters to do what usually is done in Photoshop or another raster image editing application, which is adding a tint overlay and setting the blend mode to "luminosity".

To achieve this effect, we use an HSL background over the image and set the image's background-blend-mode to luminosity. We also added a hover transition on the background color, which gives the image an overall unique effect.

Hover over the image below.

<style>
.tinted-image {
width: 100%;
height: 637px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-blend-mode: luminosity;
-webkit-transition: .55s background-color;
transition: .55s background-color;
}
.tinted-image:hover {
background-color: transparent;
}
</style> 
<div style="background-image:url('/blog/images/mountains_blog.jpg')" class="tinted-image"></div>

Diamond Cutout Images

Until recently, creating a diamond "cutout" effect with CSS was nearly impossible. In order to accomplish this, the image had to be edited in Photoshop, which creates problems for restyling the image down the road. The goal with this effect was to create a diamond cutout image that, when hovered over, reverts back to its standard orientation.

To achieve this goal, we used CSS clip-path to create the diamond shape. On hover, we once again used clip-path to change the clipping path back to its standard orientation.

Hover over the images below.

.diamond-img {
max-width: 100%;
margin-bottom: 2rem;
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s;
}
.diamond-img:hover {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style> 
<img class="diamond-img" src="samoyed.jpg">
<img class="diamond-img" src="babies.jpg">