Today we will discuss various Image effects which can be created with the help of CSS only. In this tutorial we will cover CSS3 transformation effects,  CSS3 filters and other Simple CSS image effects, like border animations, rounded corners, shadows etc.  For the ease of access all the effects are given with their separate HTML and CSS codes . You just need to copy paste the code for using it.

 

Zoom images on hover

Zoom images on hover

Normal Zoom

It uses CSS3 scale transformation. In the following CSS code you can change the value of scale(1.1) according to your requirements.

HTML

<img src='imageslogo.jpg' class='d-Zoom'/>

CSS

.d-Zoom
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-Zoom:hover
{
transform:scale(1.1);
box-shadow:0px 0px 10px #777;
}

Tip: You can reduce the value of scale(1.1) to get shrink effect also.

 

Zoom and rotate left

This effect uses CSS3 scale and rotate transformations for achieving zooming and rotation simultaneously.  You can change the value of rotate(-5deg) to modify the rotation effect.

HTML

<img src='imageslogo.jpg' class='d-ZoomRotateLeft'/>

CSS

.d-ZoomRotateLeft
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-ZoomRotateLeft:hover
{
transform:scale(1.1) rotate(-5deg);
box-shadow:3px 3px 10px #777;
}

 

Zoom and rotate right

It is similar to previous effect, the only difference is in rotation. It rotates clockwise means in right direction. The positive value of angle in rotate(5deg) leads to clockwise rotation.

HTML

<img src='imageslogo.jpg' class='d-ZoomRotateRight'/>

CSS

.d-ZoomRotateRight
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-ZoomRotateRight:hover
{
transform:scale(1.1) rotate(5deg);
box-shadow:-3px 3px 10px #777;
}

 

Zoom Images  using CSS – Part2

It explains zoom effect on images when they are enclosed in div element and the overflow property of that div element is set to hidden.

Zoom on hover using CSS3

 

Normal Zoom

HTML

<div class='d-img-container'>
<img src='imageszoom.jpg' class='d-SpecialZoom'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-SpecialZoom
{
transition:all 2s;
}
.d-SpecialZoom:hover
{
transform:scale(1.4);
}

 

Zoom and rotate left

HTML

<div class='d-img-container'>
<img src='imageszoom.jpg' class='d-SpecialZoomLeft'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-SpecialZoomLeft
{
transition:all 2s;
}
.d-SpecialZoomLeft:hover
{
transform:scale(1.4) rotate(-15deg);
}

 

Zoom and rotate right

HTML

<div class='d-img-container'>
<img src='imageszoom.jpg' class='d-SpecialZoomRight'/>
</div>

CSS

.d-img-container
{
overflow:hidden;   /*For hiding overflowed portion of zoomed image*/
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-SpecialZoomRight
{
transition:all 2s;
}
.d-SpecialZoomRight:hover
{
transform:scale(1.4) rotate(15deg);
}

 

Pan effect on image using CSS

For achieving pan effect it uses CSS3 translate property.

Pan image effects on hover

 

Pan Left

Modify the value –200px  in following CSS code to change amount of pan effect.  It is the value for movement along x axis. Negative values represent –x axis and positive values represents +x axis, simple mathematics. The value along y axis is set 0  so that our image remains fixed in vertical direction.

HTML

<div class='d-img-container'>
<img src='imagespan-hori.jpg' class='d-PanLeft'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-PanLeft
{
transition:all 5s;
}
.d-PanLeft:hover 
{
transform:translate(-200px,0); 
}

 

Pan Right

The value of x axis movement in translate(200px,0); is change to positive just to change the direction of the pan effect.

HTML

<div class=’d-img-container’>
<img src=’imagespan-hori.jpg’ class=’d-PanRight’/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-PanRight 
{
margin-left:-250px;/*This margin is set to prevent empty space in div when image moves left on hover*/
transition:all 5s;
}
.d-PanRight:hover
{
transform:translate(200px,0);
}

 

Pan up

Now for achieving vertical pan effects the value of x axis is set to 0 and y axis to 200px in translate(0,200px) . You can modify the value 200px according to your own requirements to change the amount of pan effect.

HTML

<div class='d-img-container'>
<img src='imagespan-ver.jpg' class='d-PanUp'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-PanUp 
{
margin-top:-250px;   /*This margin is set to prevent empty space in div when image moves down on hover*/ 
transition:all 2.5s;
}
.d-PanUp:hover 
{
transform:translate(0,200px);
}

 

Pan Down

HTML

<div class='d-img-container'>
<img src='imagespan-ver.jpg' class='d-PanDown'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-PanDown
{
transition:all 2.5s;
}
.d-PanDown:hover
{
transform:translate(0,-200px);
}

 

Image change on mouse hover

Image Change on Hover

 

HTML

<div class='d-ImageChange'>
<img src='imageslogo.jpg' class='d-BottomImg'/>
<img src='imageszoom.jpg' class='d-TopImg'/>
</div>

CSS

.d-ImageChange {
  position:relative;
  height:250px;
  width:322px;
  overflow:hidden;
}
.d-ImageChange img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}
.d-ImageChange .d-TopImg:hover {
  opacity:0;
}

 

Ken Burns Effect on images using CSS

Ken burns effect is a combination of both zooming and panning effects in different directions. Below are 4 different types of ken burns effect on images are given. For Zoom effect CSS3 scale transformation is used, similarly for achieving pan effect CSS3 translate transformation is used.

Ken burns effect using CSS3

 

Ken burns left

HTML

<div class='d-img-container'>
<img src='imagesken-burns.jpg' class='d-KenBurnsLeft'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-KenBurnsLeft
{
transition:all 10s;
}
.d-KenBurnsLeft:hover
{
transform:scale(1.4) translate(-100px,0);
}

 

Ken burns right

HTML

<div class='d-img-container'>
<img src='imagesken-burns.jpg' class='d-KenBurnsRight'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-KenBurnsRight
{
transform:translate(-400px,0); /*To prevent empty space in div during image movement on hover*/
transition:all 10s;
}
.d-KenBurnsRight:hover
{
transform:scale(1.4) translate(100px,0);
}

 

Ken burns up

HTML

<div class='d-img-container'>
<img src='imagesken-burns.jpg' class='d-KenBurnsUp'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-KenBurnsUp
{
transition:all 10s;
}
.d-KenBurnsUp:hover
{
transform:scale(1.4) translate(0px,100px);
}

 

Ken burns down

HTML

<div class='d-img-container'>
<img src='imagesken-burns.jpg' class='d-KenBurnsDown'/>
</div>

CSS

.d-img-container
{
overflow:hidden;
height:250px;
width:322px;
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.d-KenBurnsDown
{
transform:translate(0,-400px);/*To prevent empty space in div during image movement on hover*/
transition:all 10s;
}
.d-KenBurnsDown:hover
{
transform:scale(1.4) translate(0px,-100px);
}

 

Flip image effect using CSS

Flip image using CSS3

 

Horizontal Flip

It uses CSS3 3d transformation of rotation along Y axis.

HTML

<img src='imageslogo.jpg' class='d-FlipHorizontal'/>

CSS

.d-FlipHorizontal
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-FlipHorizontal:hover
{
transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
}

 

Vertical Flip

It uses CSS3 3d transformation of rotation along X axis.

HTML

<img src='imageslogo.jpg' class='d-FlipVertical'/>

CSS

.d-FlipVertical
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-FlipVertical:hover
{
transform: rotatex(180deg);
-webkit-transform: rotatex(180deg);
}

 

Image rotation using CSS

Image rotation using CSS3

 

Complete rotation

It uses simple CSS3 rotate transformation. You can modify the value of rotate(360deg) to control the amount of rotation. In this way you can create different types of tilt effects. Check examples of tilt effect below which uses similar rotate transformation but with different rotation angle.

Note: For clockwise rotation use positive angle values, similarly use negative angle values for anticlockwise rotation.

HTML

<img src='imageslogo.jpg' class='d-Rotation'/>

CSS

.d-Rotation
{
border:5px solid #fff;
border-radius:1000px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 2s;
}
.d-Rotation:hover
{
transform:rotate(360deg);
}

 

Tilt Left

HTML

<img src='imageslogo.jpg' class='d-TiltedLeft'/>

CSS

.d-TiltedLeft
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-TiltedLeft:hover
{
transform:rotate(-5deg);
}

 

Tilt Right

HTML

<img src='imageslogo.jpg' class='d-TiltedRight'/>

CSS

.d-TiltedRight
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-TiltedRight:hover
{
transform:rotate(5deg);
}

 

Border animation image effects using CSS

These type of effects are very easy to achieve. In these effects we are just animating the border radius property on mouse hover. Check out the effects below to get an idea and create your own wonderful border animation effects.

Border Animation using CSS3

 

Rounded to square on hover

The border-radius property value goes to 0 on hover along with a rotation transformation to get more beautiful effect.

HTML

<img src='imageslogo.jpg' class='d-BorderGoSquare'/>

CSS

.d-BorderGoSquare
{
background:url(logo.jpg);
border:5px solid #fff;
border-radius:1000px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 2.5s;
}
.d-BorderGoSquare:hover
{
border-radius:0px;
transform:rotate(360deg);
}

 

Square to round on hover

Exact opposite of above effect, in this the border-radius property value is increased on hover.

HTML

<img src='imageslogo.jpg' class='d-BorderGoRound'/>

CSS

.d-BorderGoRound
{
background:url(logo.jpg);
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 2.5s;
}
.d-BorderGoRound:hover
{
border-radius:1000px;
transform:rotate(360deg);
}

 

Leaf Effect 1

Similarly we have created leaf effect animation by playing with the border-radius property a little.

HTML

<img src='imageslogo.jpg' class='d-LeafEffectLeft'/>

CSS

.d-LeafEffectLeft
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-LeafEffectLeft:hover
{
border-radius: 0px 100px 0px 100px;
-webkit-border-radius: 0px 100px 0px 100px;
}

 

Leaf effect 2

HTML

<img src='imageslogo.jpg' class='d-LeafEffectRight'/>

CSS

.d-LeafEffectRight
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-LeafEffectRight:hover
{
border-radius: 100px 0px 100px 0px;
-webkit-border-radius: 100px 0px 100px 0px;
}

 

Image slide effect using CSS

These effect use CSS3 translate transformations. In the below given slide effects you can change the values of X and Y in translate(X,Y) to achieve designed movement in your effect.

Image Slide using CSS3

 

Slide Left

HTML

<img src='imageslogo.jpg' class='d-SlideLeft'/>

CSS

.d-SlideLeft
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-SlideLeft:hover
{
transform:translate(-20px,0);
box-shadow:3px 3px 10px #777;
}

 

Slide Right

HTML

<img src='imageslogo.jpg' class='d-SlideRight'/>

CSS

.d-SlideRight
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-SlideRight:hover
{
transform:translate(20px,0);
box-shadow:-3px 3px 10px #777;
}

 

Slide up

HTML

<img src='imageslogo.jpg' class='d-SlideUp'/>

CSS

.d-SlideUp
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-SlideUp:hover
{
transform:translate(0,-20px);
box-shadow:0px 0px 10px #777;
}

 

Slide down

HTML

<img src='imageslogo.jpg' class='d-SlideDown'/>

CSS

.d-SlideDown
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
transition:all 1s;
}
.d-SlideDown:hover
{
transform:translate(0,20px);
box-shadow:0px 0px 10px #777;
}

 

CSS3 Filters

Sepia

The value of sepia ranges from 0% to 100% .

Sepi CSS3 filter

 

HTML

<img src='imageslogo.jpg' class='d-EffectSepia'/>

CSS

.d-EffectSepia
{
transition:all 1s;
filter: sepia(100%);
-webkit-filter: sepia(100%);
}
.d-EffectSepia:hover
{
filter: sepia(0%);
-webkit-filter: sepia(0%);
}

 

Blur

The value of blur filter ranges for 0px to 100px.

Blur CSS3 filter

 

HTML

<img src='imageslogo.jpg' class='d-EffectBlur'/>

CSS

.d-EffectBlur
{
filter: blur(4px); 
-webkit-filter: blur(4px); 
transition:all 1s;
}
.d-EffectBlur:hover
{
filter: blur(0px); 
-webkit-filter: blur(0px); 
}

 

Grayscale

Its turns the images into grayscale images. Its value ranges from 0% to 100%.

GrayScale CSS3 filter

 

HTML

<img src='imageslogo.jpg' class='d-EffectGrayScale'/>

CSS

.d-EffectGrayScale
{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition:all 1s;
}
.d-EffectGrayScale:hover
{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}

 

Brightness

It modifies the brightness of the image.

Brightness CSS3 filter

 

HTML

<img src='imageslogo.jpg' class='d-EffectBrightness'/>

CSS

.d-EffectBrightness
{
transition:all 1s;
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
.d-EffectBrightness:hover
{
filter: brightness(100%);
-webkit-filter: brightness(100%);
}

 

Contrast

This filter is for adjusting the contrast of any given image.

Contrast CSS3 filter

 

HTML

<img src='imageslogo.jpg' class='d-EffectContrast'/>

CSS

.d-EffectContrast
{
transition:all 1s;
filter: contrast(50%);
-webkit-filter: contrast(50%);
}
.d-EffectContrast:hover
{
filter: contrast(100%);
-webkit-filter: contrast(100%);
}

 

Invert Colors

It inverts the colors of the given image.

Invert CSS3 filter

 

HTML

<img src='imageslogo.jpg' class='d-EffectInvertColors'/>

CSS

.d-EffectInvertColors
{
filter: invert(1);
-webkit-filter: invert(1);
transition:all 1s;
}
.d-EffectInvertColors:hover
{
filter: invert(0);
-webkit-filter: invert(0);
}

 

Add rounded corner effect to images

It uses the border-radius property for achieving rounded corners effect. For perfect circle shape your image must be in square dimensions, means all the sides of your image must be equal.

CSS rounded corner image

 

HTML

<img src='imageslogo.jpg' class='d-RoundedBorderShadow'/>

CSS

.d-RoundedBorderShadow
{
border:5px solid #fff;
border-radius:1000px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

 

Add Shadow to images

For adding shadow effect to the image one can simply use CSS3 box-shadow property

Add shadow to images

 

HTML

<img src='imageslogo.jpg' class='d-ShadowOnly'/>

CSS

.d-ShadowOnly
{
box-shadow:0px 0px 10px #777;
}

 

Add border to images

Add border to images

 

HTML

<img src='imageslogo.jpg' class='d-BorderOnly'/>

CSS

.d-BorderOnly
{
border:5px solid #fff;
}

 

Add both border and shadow effects

Add border and shadow to images

 

HTML

<img src='imageslogo.jpg' class='d-BorderShadow'/>

CSS

.d-BorderShadow
{
border:5px solid #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

Leave a Reply

Your email address will not be published. Required fields are marked *